Ширина гибкого элемента уменьшается

Question

У меня есть DIV с «display: flex;» который содержит 2 дочерних DIV рядом друг с другом. Первый - это просто DIV, который содержит некоторые упорядоченные элементы списка, а второй DIV содержит несколько изображений. Ко второму DIV применяются display: flex и flex-wrap: wrap.

По какой-то причине, когда я задаю первый DIV шириной 200 пикселей, он не работает ... он не получает ширину 200px. Но если вместо этого я даю ему min-width 200 пикселей, то он работает и получает ширину 200 пикселей. Мне нужно понять, почему width не работает, а min-width работает ...

/* Parent container that contains 2 child DIVs */

.parent_flex_container {
  display: flex;
}


/* First child DIV */

#desktop_sidemenu {
  width: 200px;
}


/* Second child DIV */

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


/* Images of the second child DIV */

.Cac {
  max-width: 50%;
  height: 50%;
  margin-bottom: 20px;
  padding: 0 5px;
}

<div class="parent_flex_container">
  <div id="desktop_sidemenu">
    <nav>
      <ul>
        <li><a href="#">Arabic</a></li>
        <li><a href="#">Green tea</a></li>
      </ul>
    </nav>
  </div>

  <div>
    <div id="Featured_grid">
      <div class="grid_title_holder">
        <h2>Featured</h2>
      </div>

      <div class="flex_container">
        <div class="Cac">
          <img src="images/cover1.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover2.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover1.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover2.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover1.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover2.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover1.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover2.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>

      </div>
    </div>

  </div>

</div>

Answer 1

Итак, давайте начнем с этого, когда вы используете flexbox, каждый дочерний элемент будет иметь 3 различных элемента:

• flex-based

• flex-grow

• flex-shrink

Где каждый из них несет различную ответственность.

flex- основа

Flex-основа контролирует размер элемента по умолчанию, прежде чем он будет обрабатываться другими свойствами Flexbox. Его можно использовать как свойство ширины или высоты. Давайте посмотрим на приведенный ниже пример:

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex-basis: 100px;
}
.green {
  background: green;
  flex-basis: 100px;
}
.blue {
  background: blue;
  flex-basis: 100px;
}

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

flex-grow

Теперь, когда речь заходит о свойстве flex-grow, по умолчанию используется 0 Это означает, что квадраты не могут расти, чтобы занять место в контейнере. Вы можете увидеть пример ниже для большего разрешения:

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex-grow: 0;
}
.green {
  background: green;
  flex-grow: 0;
}
.blue {
  background: blue;
  flex-grow: 0;
}

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

В чем здесь разница, давайте попробуем увеличить flex-grow до 1 для каждого квадрата:

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex-grow: 1;
}
.green {
  background: green;
  flex-grow: 1;
}
.blue {
  background: blue;
  flex-grow: 1;
}

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

flex-shrink

Flex-shrink является противоположностью flex-grow, определяя, насколько квадрат разрешено сокращаться. Основное назначение - указать, какие элементы вы хотите уменьшить, а какие нет. По умолчанию каждый квадрат имеет значение flex-shrink, равное 1. Чтобы увидеть, как работает сжатие, см. Следующий фрагмент:

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex-grow: 0;
  flex-basis: 100px;
  flex-shrink: 1;
}
.green {
  background: green;
  flex-grow: 0;
  flex-basis: 100px;
  flex-shrink: 0;
}
.blue {
  background: blue;
}

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

ПРИМЕЧАНИЕ: Вы должны изменить размер браузера, чтобы увидеть разницу в приведенных выше квадратах.

---

Фактический ответ

Итак, ваша проблема заключается здесь в свойстве flex-shrink, поэтому значение по умолчанию flex-shrink равно 1, поэтому оно будет выглядеть так:

#desktop_sidemenu {
  width: 200px;
  flex-shrink: 1; /* default setting of browser */
}

Так вот почему свойство width само по себе не делает работу за вас, что означает, что ваш первый div будет сокращен, чтобы не допустить выхода из строя ящиков, тогда все, что вам нужно сделать, чтобы заставить его работать, это дать это min-width: 200px или flex-shrink: 0.

ПРИМЕЧАНИЕ: есть сокращение для этих трех свойств, называемое flex, которое можно присвоить этим трем свойствам как одно в следующем порядке:

flex: 0 0 200px; /* flex-grow flex-shrink flex-basis */

Для получения дополнительной информации об этих видах вещей, вы можете следовать MDN здесь .

Answer 2

Мне нужно понять, почему width не работает, пока min-width работает ...

Поскольку гибкие элементы по умолчанию настроены на flex-shrink: 1, что означает, что они могут сжаться , чтобы минимизировать переполнение контейнера.

Ваш фактический код (который видит браузер) таков:

#desktop_sidemenu {
   width: 200px;   /* author defined */
   flex-shrink: 1; /* default setting */
}

Вам необходимо отключить flex-shrink:

#desktop_sidemenu {
   width: 200px;
   flex-shrink: 0;
}

Теперь, поскольку элемент не может сжаться ниже 200 пикселей, это эквивалентно min-width: 200px.

Подробнее см. " flex-shrink фактор "в моем ответе здесь:

• В чем различия между flex-base и width?