flex item の中で height:100% を flex item を flex container にせずしたい

flexbox で↓のようなレイアウトについてです

真ん中の高さは不定で要素に応じたサイズ、それ以外を 1:1 に分割します

html
1<style>
2    section{
3        height: 500px;
4        border: 2px solid lightgreen;
5        display: flex;
6        flex-direction: column;
7    }
8    #top,#bottom{
9        flex-grow: 1;
10        background: thistle;
11    }
12    .inner{
13        background: mistyrose;
14    }
15</style>
16
17<section>
18    <div id="top">
19        <div class="inner">x</div>
20    </div>
21    <div id="middle">=====</div>
22    <div id="bottom">
23        <div class="inner">y</div>
24    </div>
25</section>

これだと x, y のある .inner の div は #top や #bottom のサイズいっぱいになりません
単純に height:100% をすると、 #top や #bottom のサイズではなくその親の section に対して 100% になります

一応 #top と #bottom も display:flex して .inner を flex-grow:1 することで対処はできます

html
1<style>
2    section{
3        height: 500px;
4        border: 2px solid lightgreen;
5        display: flex;
6        flex-direction: column;
7    }
8    #top,#bottom{
9        flex-grow: 1;
10        background: thistle;
11        display: flex;
12    }
13    .inner{
14        background: mistyrose;
15        flex-grow: 1;
16    }
17</style>
18
19<section>
20    <div id="top">
21        <div class="inner">x</div>
22    </div>
23    <div id="middle">=====</div>
24    <div id="bottom">
25        <div class="inner">y</div>
26    </div>
27</section>

ですが、 #top や #bottom を display:flex にせずに .inner を #top や #bottom いっぱいにすることって可能なのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

これだと x, y のある .inner の div は #top や #bottom のサイズいっぱいになりません

単純に height:100% をすると、 #top や #bottom のサイズではなくその親の section に対して 100% になります

その状況が再現しません。

CSS
1    .inner{
2        background: mistyrose;
3		height: 100%;/* ADD */
4    }
5```**動くサンプル：**[https://jsfiddle.net/ostpzzzp/](https://jsfiddle.net/ostpzzzp/)

投稿2017/05/17 14:45

kei344

総合スコア69625

lazex

2017/05/17 14:56

調べたところ、私のコードでは (about:blankで試していたため) doctype 宣言がなかったために、 Transitional モードになっていたことが原因でした実際に動かす環境は html5 の strict なので、「親の section に対して 100% になる」問題なくなりましたが、上下が mistyrose にならない問題がでてるようです 100% は flex-grow で伸びた分に適用されないのでしょうか

lazex

2017/05/17 14:57

> 上下が mistyrose にならない上下に thistle のエリアが無い状態が求めるものです