画面スクロール禁止してサイドバーにだけ縦スクロールをつけたい

Question

###やりたいこと

https://cccabinet.jpn.org/bootstrap4/sample/dashboard　を参考にして

                <header>
----------------------------------------------
<div.sidebar> |     <div.control-area> 
              |-------------------------------
              |
              |       <div.contents>
              |
              |

こんな感じのレイアウトをくんだのですが
画面全体のスクロールを禁止にして
sidebar が縦のみ　control-area に横のみのスクロールを付けたいです

ためしたこと

下のようなSCSSをかいたところ
コントロールパネルには横スクロールがついたのにサイドバーにはスクロールがついてくれません

header の縦幅がレスポンシブで変化するので高さの固定値を与えるわけにも行かず
縦 flex の flex-grow で header 以下の残りの縦幅を与えようとしたのですが
サイドバーのコンテンツが増えると container-fluid 以下がbodyの高さをこえてのびてしまいます

ｊｓ で header サイズを動的に取得して無理やり高さを固定させることもできなくはないですが
CSSだけではできないのでしょうか？
理想を言えば bootstrap だけで実現したいのですが…

一応.sidebar に対して bg-color をつければ変化するのでセレクタの指定はできています

@media (min-width: 768px) { // bootstrap-md
  body {
    width: 100vw;
    height:100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    & > header {
      
    }
    & > .container-fluid {
      flex-grow: 1;

      & > form {
        & > .row {
          & > .sidebar {
            overflow-y: auto;
          }
          & > .main {
            & > .control-area {
              overflow-x: auto;
            }
            & > .contents {

            }
          }
        }
      }
    }
  }
}

Answer 1

レスポンシブだろうと何らかの高さを与えているなら

height: calc(100vh - [headerの高さ]);

でいいのでは？

個人的にはグリッドレイアウトにしたいところです。

Comments

[退会済みユーザー]

https://cccabinet.jpn.org/bootstrap4/sample/responsive-navbars

ここの２番めのバーのようにヘッダに結構ぎっしりつめこんであって軽く縮めただけで簡単に２行になってしまいます
ヘッダの高さが可変だとCSSだけで画面幅におさめるというのは不可能なのでしょうか…
できないことがわかればあきらめてヘッダの高さを固定するなりJSを使うなり他の妥協案を探すのですが意外とできそうなことが案外できないものなのですね…

[x_x]

「レスポンシブで変化する」ならヘッダの高さを指定しているのでは？

[退会済みユーザー]

質問の最初のURLにある bootstrap4 移行ガイド＞実例＞ダッシュボード
の <header> のスタイルをそのままもってきてます
ダッシュボードは長い検索欄になってますがそこに navbar の実例のようにナビゲーションリンクをつめこんでいます

具体的には
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">アプリ名</a>
<ul class="bg-dark w-100" type="text">
... nav-link をいくつか

という感じで高さを指定してはいないようです
レスポンシブというのは sm とか md で wrap, no-wrap がきりかわったり
expand-sm でおりたたまれたりという意味で使いました

なので幅が広いときは line-height + navbar の padding になるけど
幅が狭くなると複数行になって line-height 分が追加されたりするようです

さらにいえばおそらく文字サイズ変更ボタンも毎回つけてるので今回もつけることになると line-height も固定ではなくなりそうです…

[x_x]

そこは指定してますよね
.sidebar { padding: 48px 0 0; /* ナビゲーションバーの高さ */ }
.sidebar-sticky { height: calc(100vh - 48px); }
[role="main"] {
padding-top: 48px; /* 固定ナビゲーションバーの余白 */
}

[退会済みユーザー]

テンプレートの実例は余白を十分にとってあって expand-sm の畳み込みとあわせて絶対に複数行にならないことがわかってるので固定ピクセル指定をしてるんだと思いますが
自分は複数行になってもいい前提で header を作っているので pixel 指定してしまうと上に余白ができすぎるか文字が重なってしまうんですよね…
できれば「hedaer部分が可変でcalc で heightを指定しないで（外側のコンテナの height: 100vh で）スクロールを出現させることができるかどうか」で回答をいただきたいです
無理なら無理であきらめてJSで動的に header の高さを取得することにしようと思います
できそうに思えるので時間とられてしまって無理ってことがわかるだけでもありがたいです…

Answer 2

途中の階層に全部 flex-stretch と flex-grow をいれていったところ fixed サイズになりました
しかも overflow: auto 以外は bootstrap のクラス名だけでいけそうです

最初の残りサイズの指定以外は height:100% でいけそうな気がしたんですが
はなぜかきかないようでよくわかりません

@media (min-width: 768px) { // bootstrap-md
  body {
    width: 100vw;
    height:100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    & > header {

    }
    & > .container-fluid {
      flex-grow: 1;
      display:flex;
      align-items: stretch;

      & > form {
        flex-grow: 1;
        display:flex;
        align-items: stretch;
        & > .row {
          flex-grow: 1;
          align-items: stretch;

          & > .sidebar {
            overflow-y: auto;
          }
          & > main {
            & > .control-area {
              overflow-x: auto;
            }
          }
        }
      }
    }
  }
}