Как заставить flex-элемент ужиматься под родителя?

Question

Есть flex-контейнер, внутри 2 элемента расположенные по центру и вертикально с фиксированной шириной.

Вопрос: как заставить их ужиматься под ширину родителя при уменьшении его ширины.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: white;
  color: white;
}

.flex {
  width: 250px;
}

.flex1 {
  background-color: green;
}

.flex2 {
  background-color: blue;
}

<div class="container">
  <div class="flex flex1">1 блок</div>
  <div class="flex flex2">2 блок</div>
</div>

JSFiddle

Если оставить внутри один блок, а родителю задать flex-direction: row и justify-content: center будет работать так, как нужно - JSFiddle, но нужно 2 элемента внутри

Answer 1

В данном случае можно, как вариант, ширину для флекс элементов задать таким образом:

.flex {
      max-width: 250px;
      width: 100%;
      }

Тогда и начальная ширина в 250px сохранится и ужиматься под родителя будут.

Answer 2

Чтобы блоки не схлопывались, при малой ширине или отсутствии контента, пытаемся растянуть их на всю ширину родителя:

width: 100%; /* Устанавливаем и забываем (см. далее) */

Одновременно ограничиваем блокам максимальную ширину:

max-width: 250px; /* Теперь за начальную ширину блока отвечает это свойство */

Таким образом добиваемся "резиновости" блока. Т.е. блок имеет нужную нам ширину, но может уменьшаться при необходимости:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: white;
  color: white;
  /* для интерактивности */
  resize: both; overflow: hidden; outline: 1px dashed #666;
}


/* .flex { width: 250px; } */

.flex {
  width: 100%;
  max-width: 250px;
  
  min-width: 10ch;
  padding: .5em;
  box-sizing: border-box;
}

.flex1 { background-color: green; }
.flex2 { background-color: blue; }
.flex3 { background-color: red; }

<div class="container">
  <div class="flex flex1">1 блок</div>
  <div class="flex flex2">2 блок содержит больше текста</div>
  <div class="flex flex3">3 блок превышает максимальную установленную ширину, поэтому возникают переносы, но не растягивание блока</div>
</div>

Также желательно установить для блоков min-width и padding, чтобы максимально сохранять читабельность, при сильном сжатии по ширине.

БЛОГ НА HUSL

Как заставить flex-элемент ужиматься под родителя?

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