1

Почему при уменьшении высоты внешнего контейнера не уменьшается высота top-container и вложенных в него элементов (#first, #second, #third) ?

При этом если задать высоту непосредственно для элемента top-container, то вложенные элементы всё же сжимаются...

Как заставить сжиматься flex-контейнер с его потомками, вложенный в другой flex-контейнер ?:)

.outer-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 450px;
}

.top-container {
  display: flex;
  flex-direction: column;
  
  background: rgba(200,0,0,.5);
}

.top-container div {
  border: 1px solid black;
  flex: 0 1 120px;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.bottom-container {
  display: flex;
  flex-direction: column;
  flex: none;
  
  background: rgba(0,200,0,.5);
}

.bottom-container div {
  border: 1px solid black;
  display: flex;
  align-items: center;
}
<div class="outer-container">
   <div class="top-container">
    <div id="first">111</div>
    <div id="second">222</div>
    <div id="third">333</div>
  </div>
  <div class="bottom-container">
    <div id="four">4</div>
    <div id="five">5</div>
  </div>
</div>

2
  • Потому что вы задали этим блокам высоту в flex: 0 1 120px;
    – E_K
    14 янв 2020 в 12:34
  • Даже если не выставлять flex-basis = 120px, то поведение сохраняется. Ну и к тому же мне это и нужно -- чтобы вложенные элементы имели высоту 120px по-умолчанию, но могли сжиматься до 40px
    – NinoZombie
    15 янв 2020 в 3:11

1 ответ 1

0

Помогли на англоязычном Stackoverflow

В итоге контейнеры не сжимались из-за того, что для них по-умолчанию выставляется min-width/min-height : auto

А выставление конкретного значения вместо auto позволяет им начать сжиматься

Ниже обновленный пример с проставленным значением min-height

.outer-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 450px;
}

.top-container {
  display: flex;
  flex-direction: column;
  min-height: 0;
  
  background: rgba(200,0,0,.5);
}

.top-container div {
  border: 1px solid black;
  flex: 0 1 120px;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.bottom-container {
  display: flex;
  flex-direction: column;
  flex: none;
  
  background: rgba(0,200,0,.5);
}

.bottom-container div {
  border: 1px solid black;
  display: flex;
  align-items: center;
}
<div class="outer-container">
   <div class="top-container">
    <div id="first">111</div>
    <div id="second">222</div>
    <div id="third">333</div>
  </div>
  <div class="bottom-container">
    <div id="four">4</div>
    <div id="five">5</div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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