chrome のバージョンアップでスクロールバーが消える謎!!!
今日 chrome を最新の 76.0.3809.100 にアップデートしたら
下記のような構成のページでスクロールバーが表示されなくなりました
すでに旧バージョンでの確認方法がないので再現できてるかわからないのですが
.sub の中の長い form をスクロールできていたのが
現在スクロールが表示されずにスクロールできません
(位置関係のCSSでのみ抜き出して わかりやすいように background-color だけ追加しています)
現バージョンでサイドバーの中の長いコンテンツをスクロールするにはどうすればいいでしょうか
もしまだバージョンが古いままの方がいらっしゃったら
以下のソースでスクロールがでてるか確認してもらえると助かります
<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>
追記
原因を調べてみたらキャンバスは 100vh で固定して
高さ可変のヘッダ領域の残りの高さをめいっぱい使うために flex-grow を使っていて
いままで外側のサイズ依存で決まってたのが内側のサイズ依存できまるようになってしまってるようです
可変でなければ 80% とか calc(100%-100px) とかできるんですけど
可変サイズの残りの領域を使って更にその内側のものをスクロールさせるにはどうしたらいいんでしょうか…