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

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"）的子元素的数量容器元素，使子元素的高度不同而有所不同基于这个类。

但是，我，想知道是否有可能填补家长的高度，不管多子元素是如何存在的，而无需为不同的类添加到所有父容器。

旁注：这在IE10

Jsfiddle

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

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