2つのフレックスアイテムをそれぞれ親の高さの50％にする

Question

私はCSSのフレックスレイアウトを使ってダッシュボードを作成していますが、フレックスアイテムの内側に2つのウィジェット（もう一方を重ねる）を入れて50％彼らの親は常に（内容にかかわらず）。

<div class="flex-container"> 
    <div class="flex-item"> 
    <div class="widget" id="w1"> 
     widget 1 content 
    </div> 
    <div class="widget" id="w2"> 
     widget 2 content 
    </div> 
    </div> 
</div> 

と私のCSSは次のようになります：私のhtmlがあるので、場合

.flex-container { 
    display: flex; 
    flex-direction: column; 
} 
.flex-item { 
    flex: 1; 
} 

がどのように私は2つの.widget sが常に.flex-itemの50％の高さを占めるように入手できますか？

.flex-item { 
    flex: 1; 
    display: flex; 
} 
.widget { 
    flex: 1; 
} 

をしかし、これだけの作品は、両方のウィジェットの内容が同じである場合：

私が試してみました。

問題をより詳しく説明するために、elaborate jsfiddleを作成しました。

ありがとうございます！

Answer 1

あなたは、両方のウィジェットの内容が同じである場合flex: 1にのみ動作することを言うとき、それは正しくありません。それはflex: 1の目的を破るだろう。

flex: 1フレックスアイテムにコンテナスペースを均等に配布するよう指示します。 flex: 1のフレックスアイテムが4つある場合は、それぞれ25％かかります。 3つは33.33％を取る。 2つのフレックスアイテムは50％を消費します。内容量にかかわらずです。

は、この図を参照してください：DEMO

---

あなたが抱えている問題は、問題の投稿のコードでは明確ではありません。しかし、それはあなたのフィドルのデモで明らかです。

あなたはheight: 400pxのメインコンテナを持っています。また、divに10pxのパディングを追加するルールもあります。これにより、各divに20ピクセルの高さが追加されます。 height: 2emというヘッダーもあります。

余分な高さを考慮すると、レイアウトが機能します。

は、これらの調整試してみてください。

HTML（変更なし）

CSSを

div { 
    box-shadow: inset 0 0 0 1px rgba(30, 100, 200, 0.5); 
    padding: 10px;     /* sneaky villain */ 
    font-family: arial; 
} 

h1, p { margin: 0; } 

#main-wrapper { 
    height: 400px;     /* primary height */ 
    display: flex; 
    flex-direction: column; 
} 

#header { 
    flex-shrink: 0; 
    height: 2em;      /* header height */ 
} 

#main-column-wrapper { 
    flex: 1; 
    display: flex; 
    flex-direction: row; 
    height: calc(100% - 2em - 20px); /* primary height - header height - padding */ 
} 

#side-column { 
    width: 20%; 
    flex-shrink: 0; 
} 

#main-column { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    height: calc(100% - 40px);  /* main-column-wrapper height - padding (2 divs) */ 
} 

#widget1, 
#widget2 { 
    flex: 1; 
    flex-shrink: 0; 
    overflow: auto; 
} 

Revised Fiddle

パディングを調整するためにbox-sizing: border-boxを使用する別のオプションは以下のようになります。ここで詳細を学んでください：https://css-tricks.com/box-sizing/