Skip to main content
ツイート済み twitter.com/jaStackOverflow/status/763358715948986368
タグを編集
リンク
yasu
  • 4,443
  • 3
  • 20
  • 25
ソース リンク
hiro
  • 1,074
  • 2
  • 11
  • 19

flexboxの孫要素にheight:100%が効かない理由はなぜですか

html,body
{
  height: 100%;
  margin: 0;
}

.flex
{
  display: flex;
  height: 100%;
}

.flex-child
{
  border: solid 1px gray;
  background: blue;
    
}

.flex-grandchildren
{
  background: red;
  height: 100%;
}
<div class="flex" >
  <div class="flex-child">
    <div class="flex-grandchildren">
      height:100%が効かない
    </div>
  </div>
  <div class="flex-child">
    <div class="flex-grandchildren">
      height:100%が効かない
    </div>
  </div>
</div>

flex-grandchildren(背景色:赤)はheight:100%を指定しているのに
親要素(背景色:青)の高さと同じ高さにならない理由はなぜでしょうか?