ｃｓｓでフレックスボックスを使い、１つを「残りの高さすべて」にセットしたい

###実現したい目的
こちらですが、下の .contents というクラスを、「残りの高さすべて」にセットする方法を知りたいです。

<html>
<head>
<style>
body {
    padding: 0;
    margin: 0;
}
.side {
    min-height: 100vh;
    overflow-y: scroll;
}
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header {
    height: 50px;
    margin: 0 0 10px 0;
    background: skyblue;
}
.menu {
    height: 30px;
    margin: 0 0 20px 0;
    background: salmon;
    position: sticky;
    top: 0;
}
.contents {
    flex: 1;
    background: khaki;
}
</style>
</head>
<body>
<aside class="side">
  <div class="container">
      <div class="header">
      </div>
      <div class="menu">
      </div>
      <div class="contents">
      </div>
  </div>
</aside>
</body>
</html>

高さとしては
.side
= .container
= .header + .menu + .contents
という関係です。
このうち .header と .menu は高さ指定しているので、残りを .contents に割り振りたいということです。

###試したこと

私のレベルですと calc(100% - 50px - 10px - 30px - 20px) のようにして、高さ指定した .header と .menu の分を無理やりcalcで引くという方法をまず思いつきました。

しかしこの高さ指定はスマホで変化するため、いちいち calc をそれに対応させるのはどうかと思います。

続いてJSで測るの方法も思いつきますが、それだけのために余計な手間だと思います。

最後に試したのが上記コードのフレックスボックスで、

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

のように縦に並べつつ

.contents {
    flex: 1;
    background: khaki;
}

この flex: 1; で「残りの高さすべて」となる意図で書いたのですが、そのようになりません。

CSSでの指定で「残りの高さすべて」はどうしたらいいでしょうか？

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

回答1件

ベストアンサー

こんにちは。

css
1.side {
2	min-height: 100vh;
3	overflow-y: scroll;
4	height: 100vh; /* これを追加 */
5}
6

参考：

<percentage> Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the used height is calculated as if 'auto' was specified.

10.5 Content height: the 'height' property | Visual formatting model details

勝手訳：パーセンテージの高さを指定します。パーセンテージは、包含ブロックの高さを基に計算されます。包含ブロックの高さが明示的ではなく（たとえば、コンテンツ高さ依存）、絶対的配置ではない場合、auto として計算されます。

投稿2021/02/02 03:36

編集2021/02/02 03:45