Сделайте так, чтобы flexbox дочерняя заполняла доступное вертикальное пространство с flex-direction: row

Question

Поскольку ссылка на jsfiddle говорит на сто слов, вот что я пытаюсь сделать:

https://jsfiddle.net/5zs823L9/7

По сути, я хочу, чтобы дети в моем flexbox растягивались и заполнялисьвсе вертикальное пространство, доступное в их ряду, но я не могу понять, как это сделать.Например, в этой ситуации:

.flexcontainer {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.flexchild {
    flex-basis: 140px;
    flex-grow: 2;
    flex-direction: row;
}

.flexchild.first {
    min-height: 128px;
    height: 256px;
}

.flexchild.second {
    min-height: 128px;
}

В этой ситуации, как я могу заставить flexchild.second растягиваться и иметь высоту 256 пикселей?(высота .flexchild.first динамична в реальности)

Answer 1

Дочерние элементы flexbox имеют одинаковую высоту по умолчанию (align-items: stretch).Просто удалите align-items: flex-start.

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

.flexchild {
  flex-basis: 140px;
  flex-grow: 2;
  color: white;
  padding: 12px;
}

.first {
  background-color: red;
}

.second {
  background-color: blue;
}

.list.unstyled {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

<div class="flexcontainer">
  <div class="flexchild first">
    <ul class="list unstyled">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
  </div>
  <div class="flexchild second">
    this should be as high as the red child
  </div>
</div>

(Ненужный код удален. Вставлен ul вместо нескольких <br>s.)

Answer 2

Вы можете удалить align-items: flex-start; из .flexcontainer

.flexcontainer {
    display: flex;
    flex-wrap: wrap;
    /* align-items: stretch; */ /* default */
}

.flexchild {
  display: block;
    position: relative;
    flex-basis: 140px;
    flex-grow: 2;
    vertical-align: sub;
    color: white;
    padding: 12px;
    flex-direction: row;
}

.first {
  background-color: red;
}

.second {
  background-color: blue;
}

<div class="flexcontainer">
  <div class="flexchild first">
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9
  </div>
  <div class="flexchild second">
    this should be as high as the red child
  </div>
</div>

Или вы можете установить align-self: stretch; для .second

.flexcontainer {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.flexchild {
  display: block;
    position: relative;
    flex-basis: 140px;
    flex-grow: 2;
    vertical-align: sub;
    color: white;
    padding: 12px;
    flex-direction: row;
}

.first {
  background-color: red;
}

.second {
  background-color: blue;
  align-self: stretch;
}

<div class="flexcontainer">
  <div class="flexchild first">
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9
  </div>
  <div class="flexchild second">
    this should be as high as the red child
  </div>
</div>