当父元素具有固定的高度时，填写可变数量的子元素的高度。

Question

我有一个容器元素，它有固定的高度。我希望这个容器元素的子元素完全填充容器元素的高度，在子元素之间平均分配高度。这里的挑战是子元素的数量可以在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")，并根据这个类使子元素的高度百分比发生变化。

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

Sidenote:这必须在IE10中工作

小提琴手

Answer 1

这是柔性箱的经典案例。Flexbox是使用部分由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>

​

Answer 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;
}