Строки одинаковой высоты в направлении flex: столбец

У меня есть гибкий макет с двумя гибкими элементами, отображаемыми в виде строк (flex-direction: column). Предметы должны иметь минимальную высоту, но они должны поддерживать ту же высоту, что и один из них, чтобы расти. Посмотрите эту скрипку и уменьшите ширину панели результатов; это заставляет второго .component элемент для увеличения его высоты, но высота первого .component элемент остается прежним.

Можно ли заставить гибкие элементы поддерживать одинаковую высоту? Обращаем ваше внимание, что главное в этом - сложение двух .component элементы, без которых я не смог бы достичь flex-direction: column; flex-direction: row сделал бы такую ​​же высоту возможной, но укладка не работает.

Вот результат того, что я до сих пор:

div {
  border: 1px solid black;
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-direction: column;
  align-content: stretch;
}
.component {
  min-height: 300px;
}
.left {
  margin-left: 50px;
  margin-top: 50px;
  margin-right: 100px;
  background-color: lightyellow;
}
.right {
  margin-left: 100px;
  margin-top: -250px;
  margin-right: 50px;
  background-color: lightgreen;
}
<div class="container">
  <div class="component left">

  </div>
  <div class="component right">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed orci scelerisque, scelerisque enim at, ullamcorper ipsum. Cras eget sapien mi. Aliquam ultrices, ligula ut mollis maximus, ligula massa imperdiet libero, at faucibus mauris ante non
      magna. Sed ex lacus, efficitur sit amet neque ut, venenatis hendrerit libero. Suspendisse ornare orci mi. Nulla iaculis egestas libero, eu tincidunt urna tristique et. Quisque nec odio non elit molestie facilisis.
    </p>
    <p>
      Vestibulum scelerisque justo urna, a semper nisi sollicitudin in. Cras congue enim eu euismod semper. Proin consequat gravida felis, quis tincidunt massa pulvinar quis. Morbi nec diam eget orci vestibulum malesuada. Sed volutpat metus eget mattis commodo.
      Nulla facilisi. Praesent lectus mauris, consequat eu varius vitae, cursus vitae leo. Vivamus sagittis lacinia tortor eu ullamcorper. Integer eget velit magna. Duis vestibulum molestie posuere.
    </p>

  </div>
</div>

Источник

2 ответа

Решение

Функция гибких столбцов с одинаковой высотой - результат align-items: stretchнастройка по умолчанию для flex-контейнера - применяется только к flex-элементам в одной строке.

Это не работает для элементов в многострочном гибком контейнере. Это поведение определено в спецификации:

6. Flex Lines

В многострочном гибком контейнере (даже в одном, содержащем только одну строку) поперечный размер каждой строки - это минимальный размер, необходимый для размещения гибких элементов в строке (после выравнивания из-за align-self), и линии выровнены внутри гибкого контейнера с align-content имущество.

Другими словами, когда в гибком контейнере на основе строк имеется несколько строк, высота каждой строки ("поперечный размер") - это "минимальный размер, необходимый для размещения гибких элементов в строке".

Кроме того, потому что align-items: stretch работает вдоль поперечной оси, функция столбцов одинаковой высоты бесполезна в flex-direction: columnгде поперечная ось является горизонтальной.

Для достижения одинаковой высоты столбцов / строк в нескольких строках рассмотрите решение Javascript.

Однако, не зная ничего о вашей общей цели, вот простой способ достижения строк равной высоты в вашем текущем макете:

Добавить дублированный контент в обоих div. в .component.left div, использовать visibility: hidden,

Пересмотренная скрипка

Источник

Вы можете просто обернуть эти столбцы flexbox в другой flexbox, который является строкой, нет причины, по которой вы не можете иметь элементы как flexbox, так и flex-элементов.

<div id="container">
  <div class="col">
    <a href="">asdf</a>
    <a href="">asdf</a>
    <a href="">asdf</a>
  </div>
  <div class="col">
    <a href="">asdf</a>
    <a href="">asdf</a>
    <a href="">asdf</a>
  </div>
</div>

#container {
  display: flex;
}

#container .col {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: grey;
}

https://jsfiddle.net/1dp87bm2/1/

Источник
Другие вопросы по тегам