質問

ある要素の高さを親要素の高さに対して100%にしたい場合、これまで私は親要素に対して高さを指定しないといけないと覚えておりました。

しかし、以下のケースだと、li要素に高さを指定していないにも関わらず、a要素の高さをheight: 100%にすることで、navの高さ100%を受け継いだul要素の高さと一致しております。

以下のような場合、li要素にもheight: 100%を指定しないと、a要素でheight: 100%を指定してもnav要素の高さにa要素の高さは一致しないと今まで理解していたのですが、そうではないのでしょうか？

どういう場合に、親要素に高さを指定する必要があるのか、ご教示頂ければ幸いです。

結果

HTML

<nav>
  <ul>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
  </ul>
</nav>

CSS

nav {
  height: 300px;
}

ul {
  list-style-type: none;
  display: flex;
  margin: 0;
  background-color: #cccccc;
  height: 100%;
}

/* li要素にはheight: 100%の指定がない */
li:not(:last-child) {
  margin-right: 1em;
}

a {
  display: block;
  height: 100%;
  background-color: yellow;
}

追記

別のパターンも試してみました。
こちらのパターンも同様、span要素の高さが300pxになります。

結果

HTML

<div class="container">
  <div class="parent">
        <div class="child">
      <div class="grand-child"><span>1</span></div>
    </div>
    
        <div class="child">
      <div class="grand-child"><span>1</span></div>
    </div>
    
        <div class="child">
      <div class="grand-child"><span>1</span></div>
    </div>
  </div>
</div>

CSS

.container {
  height: 300px;
}

.parent {
  display: flex;
  margin: 0;
  background-color: #cccccc;
  height: 100%;
}

.child {
  display: inline;
}

.child:not(:last-child) {
  margin-right: 1em;
}

.grand-child {
  display: inline;
}

span {
  display: block;
  height: 100%;
  background-color: yellow;
}

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

回答2件

フレックスアイテムだからです。

normal
キーワードの効果は現在のレイアウトモードに依存します。
...
フレックスアイテムについては、このキーワードは stretch として動作します。
...
stretch
アイテムのマージンボックスの cross-size が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。
...
初期値 normal

align-items - CSS: カスケーディングスタイルシート | MDN

投稿2021/03/03 05:11

Lhankor_Mhy

総合スコア36946

ベストアンサー

ul に display: flex; を設定してますが、flexではalign-items: stretch が規定値なので子要素(フレックスアイテム)は親要素(フレックスコンテナ)の高さに拡張されます。

下記のようにalign-itemsを明示的に指定すれば、拡張しないようにできます。

css
1ul {
2  list-style-type: none;
3  display: flex;
4  align-items: flex-start; /**/
5  margin: 0;
6  background-color: #cccccc;
7  height: 100%;
8}