2

Есть 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 элемента внутри

2
  • 1
    .flex { max-width: 250px; } вместо .flex { width: 250px; }, не?
    – UModeL
    Commented 3 апр. 2020 в 3:32
  • 1
    вроде то, спасибо
    – Evgeniy K
    Commented 3 апр. 2020 в 5:29

2 ответа 2

3

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

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, чтобы максимально сохранять читабельность, при сильном сжатии по ширине.

2
  • 1
    Хороший, полезный ответ, особенно для начинающих, которые могут его использовать для изучения CSS, благодаря подробным комментариям Commented 4 апр. 2020 в 5:53
  • 1
    Вот это именно то, что было нужно, спасибо!
    – Evgeniy K
    Commented 4 апр. 2020 в 12:18
2

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

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.