1
フレックスボックスを初めて使用しており、3列のレイアウトに取り組んでいます。フレックスボックス：ページスクロールで同じ高さの3列
- 3列
- それぞれ100％の高さ
- 可変コンテンツの高さをそれぞれ
- にコンテンツがユーザーの画面よりも背が高い場合は、ページが をスクロールする必要があります。
- カラムは同じ高さのままにしてください。
これは私がターゲットにしていますものです
これは私のHTMLコードです：
<html>
<head>
<title>
FlexBox
</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="container">
<div class="cols">
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
</div>
<div class="cols">
text
</div>
<div class="cols">
text
</div>
</div>
</body>
</html>
とCSS：
body, html {
background-color: seashell;
margin: 0;
}
.container {
display: flex;
justify-content: center;
height: 100%;
}
.container .cols {
flex: 1 0 auto;
background-color: burlywood;
margin: 10px 10px 0 10px;
padding: 10px;
}
この場合に何が起こる内容は、列（つまり、画面の高さの100％を取得します）オーバーフローしている：
を
私はhav eはそれを修正しようとした：
が
.containerからheight: 100%を削除します。内容は背が高いと列を伸ばすとき、それは適切な外観につながりますが、含有量が少ない場合 - 列は100％の画面の高さではありません。それは私にとってはうまくいかない。align-items: flex-start〜.container：内容が100％の画面の高さのいずれの列も小さい場合はコンテンツが列を伸ばします。
どのように修正できますか？
PS：奇妙なことに、私がthis example in jsfiddleを試したとき、それは期待どおりに動作しますが、ブラウザで実行すると、上記のことがわかります。
ありがとうございます！ .containerのmin-height:100%に
使用 'のmin-height：100vh'とアイテムがさらに少ないコンテンツでビューポートを記入します... https://jsfiddle.net/3h6tgncj/ – LGSon