57229


今日 chrome を最新の 76.0.3809.100 にアップデートしたら  
下記のような構成のページでスクロールバーが表示されなくなりました

すでに旧バージョンでの確認方法がないので再現できてるかわからないのですが  
.sub の中の長い form をスクロールできていたのが  
現在スクロールが表示されずにスクロールできません  
(位置関係のCSSでのみ抜き出して わかりやすいように background-color だけ追加しています)

現バージョンでサイドバーの中の長いコンテンツをスクロールするにはどうすればいいでしょうか

もしまだバージョンが古いままの方がいらっしゃったら  
以下のソースでスクロールがでてるか確認してもらえると助かります

[code]

    <html>
    <head>
      <style>
        body {
          margin: 0;
        }
        .canvas {
          width: 100vw;
          height: 100vh;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: stretch;
        }
    
        .header {
          background-color: #fee;
        }
    
        .content {
          background-color: #ffe;
          flex-grow: 1;
          display: flex;
          align-items: stretch;
        }
        .sub {    
          background-color: #eef;
          overflow-y: auto;
          height: 100%;
          margin-top: 0px;
          width: 300px;
          background: #fff;
          border-right: 1px solid #eee;
          padding: 10px;
        }
        form {
          background-color: #ddf;
          height: 2000px;
        }
        .main {
          background-color: #eff;
          flex-grow: 1;
          display: flex;
          align-items: stretch;
        }
    
      </style>
    </head>
    
    <body>
      <div class="canvas">
        <div class="header">header</div>
        <div class="content">
          <div class="sub">
            <form></form>
          </div>
          <div class="main">
          </div>
        </div>
      </div>
    </body>
    </html>
    
[/code]

### 追記

原因を調べてみたらキャンバスは 100vh で固定して  
高さ可変のヘッダ領域の残りの高さをめいっぱい使うために flex-grow を使っていて  
いままで外側のサイズ依存で決まってたのが内側のサイズ依存できまるようになってしまってるようです

可変でなければ 80% とか calc(100%-100px) とかできるんですけど  
可変サイズの残りの領域を使って更にその内側のものをスクロールさせるにはどうしたらいいんでしょうか…


CC BY-SA 4.0
2019-08-07T10:18:19.047
57219
2019-08-07T16:18:03.330
2019-08-07T11:53:16.963
question
html css google-chrome
chrome のバージョンアップでスクロールバーが消える謎！！！


手元にあったGoogle Chrome 75.0.3770.142(Windows10
64bit)で試してみましたが、書かれている通り、スクロールバーは表示されていました。  
CSSは詳しくないのですが、`.content`に`overflow: hidden;`を追加する、というのではどうでしょうか。

[code]

    <html>
    <head>
      <style>
        body {
          margin: 0;
        }
        .canvas {
          width: 100vw;
          height: 100vh;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: stretch;
        }
    
        .header {
          background-color: #fee;
        }
    
        .content {
          background-color: #ffe;
          flex-grow: 1;
          display: flex;
          align-items: stretch;
          overflow: hidden;
        }
        .sub {    
          background-color: #eef;
          overflow-y: auto;
          height: 100%;
          margin-top: 0px;
          width: 300px;
          background: #fff;
          border-right: 1px solid #eee;
          padding: 10px;
        }
        form {
          background-color: #ddf;
          height: 2000px;
        }
        .main {
          background-color: #eff;
          flex-grow: 1;
          display: flex;
          align-items: stretch;
        }
    
      </style>
    </head>
    
    <body>
      <div class="canvas">
        <div class="header">header</div>
        <div class="content">
          <div class="sub">
            <form></form>
          </div>
          <div class="main">
          </div>
        </div>
      </div>
    </body>
    </html>
[/code]


CC BY-SA 4.0
2019-08-07T16:18:03.330
57229
2019-08-07T16:18:03.330
2808
57219
answer