填充可变数量的子元素的高度，当父元素具有固定高度时答案

【问题标题】：Fill out the height of a variable number of child elements, when the parent element has a fixed height填充可变数量的子元素的高度，当父元素具有固定高度时
【发布时间】：2017-06-14 18:17:41
【问题描述】：

我有一个固定高度的容器元素。 我希望这个容器元素的子元素完全填满容器元素的高度，在子元素之间平均分配高度。这里的挑战是子元素的数量可以在 2 到 2 之间变化5个元素。

.container-element {
  height: 200px;
  border: solid black 1px;
  margin-bottom: 20px;
}

.child-element {
  background: grey;
}

.child-element:nth-child(even) {
  background: darkGrey;
}

<div class="container-element">
  <div class="child-element">
    Dummy content
  </div>
  <div class="child-element">
    Dummy content
  </div>
  <div class="child-element">
    Dummy content
  </div>
  <div class="child-element">
    Dummy content
  </div>
</div>

<div class="container-element">
  <div class="child-element">
    Dummy content2
  </div>
  <div class="child-element">
    Dummy content2
  </div>
</div>

我最初的想法是在容器元素中添加一个类，该类具有驻留在其中的子元素数量（即class="container-element elements-3"），并根据该类使子元素的高度百分比有所不同。

但是，我想知道是否可以填充 parent 的高度，无论存在多少子元素，而不必向所有父容器添加不同的类。

旁注：这必须在 IE10 中工作

Jsfiddle

【问题讨论】：

标签： html css internet-explorer-10

【解决方案1】：

这是一个 flexbox 的经典案例。 Flexbox 是 partially supported by IE10 使用 -ms- prefix，所以这应该在 IE10 中工作（我无法检查它）：

.container-element {
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 200px;
  border: solid black 1px;
  margin-bottom: 20px;
}

.child-element {
  -ms-flex: auto 1;
  flex: 1;
  background: grey;
}

.child-element:nth-child(even) {
  background: darkGrey;
}

<div class="container-element">
  <div class="child-element">
    Dummy content
  </div>
  <div class="child-element">
    Dummy content
  </div>
  <div class="child-element">
    Dummy content
  </div>
  <div class="child-element">
    Dummy content
  </div>
</div>

<div class="container-element">
  <div class="child-element">
    Dummy content2
  </div>
  <div class="child-element">
    Dummy content2
  </div>
</div>

【讨论】：

【解决方案2】：

工作小提琴：https://jsfiddle.net/ash06229/urtnw14x/4/

它适用于 IE-10。

将以下属性添加到以下类

.container-element {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.child-element {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

【讨论】：