Не работает flex-wrap

Question

Блок с меню, при сжимании экрана, не переносит flex-элементы на новую строку. Хоть flex-wrap: wrap прописан.

body {
  margin: 0;
  padding: 0;
  font-family: 'Barlow', sans-serif;
}

h1 {
  font-weight: bold;
}

.dot {
  color: red;
}

.container {
  margin: 0 auto;
  width: 950px;
}

.logo {
  flex-grow: 1;
  font-size: 24px;
  font-weight: bold;
}

.navbar {
  margin-top: 50px;
}

.navbar-flex {
  display: flex;
}

.menu {
  display: flex;
  flex-wrap: wrap;
}

.menu-list:not(:first-child) {
  margin-left: 50px;
}

<div class="navbar">
  <div class="container">
    <div class="navbar-flex">
      <div class="logo">Japan<span class="dot">.</span></div>
      
      <div class="menu">
        <div class="menu-list"><a href="#">ABOUT</a></div>
        <div class="menu-list"><a href="#">DISCOVER</a></div>
        <div class="menu-list"><a href="#">PLAT YOUR TRIP</a></div>
        <div class="menu-list"><a href="#">PLAT YOUR TRIP</a></div>
      </div>
      
    </div>
  </div>
</div>

Answer 1

У Вас фиксированная ширина для div.container, и меню просто там умещается и переноситься ему незачем.

Укажите max-width вместо width:

body {
  margin: 0;
  padding: 0;
  font-family: "Barlow", sans-serif;
}

h1 {
  font-weight: bold;
}

.dot {
  color: red;
}

.container {
  margin: 0 auto;
  max-width: 950px;
}

.logo {
  flex-grow: 1;
  font-size: 24px;
  font-weight: bold;
}

.navbar {
  margin-top: 50px;
}

.navbar-flex {
  display: flex;
}

.menu {
  display: flex;
  flex-wrap: wrap;
}

.menu-list:not(:first-child) {
  margin-left: 50px;
}

<div class="navbar">
  <div class="container">
    <div class="navbar-flex">
      <div class="logo">Japan<span class="dot">.</span></div>
      <div class="menu">
        <div class="menu-list"><a href="#">ABOUT</a></div>
        <div class="menu-list"><a href="#">DISCOVER</a></div>
        <div class="menu-list"><a href="#">PLAT YOUR TRIP</a></div>
        <div class="menu-list"><a href="#">PLAT YOUR TRIP</a></div>
      </div>
    </div>
  </div>
</div>

Answer 2

*, *::before, *::after {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Barlow', sans-serif;
}

h1 {
  font-weight: bold;
}

.dot {
  color: red;
}

.container {
  margin: 0 auto;
  max-width: 950px;
  padding: 0 15px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.navbar {
  padding: 20px 0;
}

.navbar-flex {
  display: flex;
  justify-content: space-between;
  gap: 5vw;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4vw;
  flex: 1;
}

<div class="navbar">
  <div class="container">
    <div class="navbar-flex">
      <div class="logo">Japan<span class="dot">.</span></div>
      
      <div class="menu">
        <div class="menu-list"><a href="#">ABOUT</a></div>
        <div class="menu-list"><a href="#">DISCOVER</a></div>
        <div class="menu-list"><a href="#">PLAT YOUR TRIP</a></div>
        <div class="menu-list"><a href="#">PLAT YOUR TRIP</a></div>
      </div>
      
    </div>
  </div>
</div>

БЛОГ НА HUSL

Не работает flex-wrap

Ответы (2 шт):