親要素の高さが固定されている場合、子要素の可変数の高さを設定します。

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

で作業する必要があります。フレキシボックスは-ms- prefixを使用してpartially supported by IE10あるので、これは（私はそれを確認する方法をしたん）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; 
} 

を次のプロパティを追加します。