Q&A###前提・実現したいこと
CSSのflexを使って、3カラムのシングルページアプリケーションを作ろうとしています。
左カラムと右カラムはスクロールせずに、中央カラムだけ縦方向にスクロールさせたいです。
###発生している問題・エラーメッセージ
CSSのflexで幅指定はうまくいったのですが、中央カラムが画面サイズを超えた場合に、overflow-yを中央カラムだけに指定しているのですが、左カラムや右カラムもスクロールされてしまいます。
position: relative;などを使う方法でも解決できるとは思うのですが、flexを使った解決方法などがあれば教えて頂きたいです。
###ソースコード
html
1<body> 2 <div class="container"> 3 <div class="left"></div> 4 <div class="main"></div> 5 <div class="right"></div> 6 </div> 7</body>
css
1.container { 2 display: flex; 3 min-height: 100vh; 4} 5 6.left { 7 width: 50px; 8} 9 10.main { 11 flex: auto; 12 min-width: 600px; 13 width: auto; 14 overflow-y: scroll; 15} 16 17.left { 18 width: 250px; 19} 20
回答1件
0
自己解決
css
1.container { 2 display: flex; 3 height: 100vh; 4}
としたらできました。
overflowを指定するときは親要素で高さの指定をする必要があるようですが、
min-heightだけではダメみたいです。
今回はスクロールする仕様にしたかったので、min-heightは削りましたが、問題ありませんでした。
投稿2015/09/21 09:08
総合スコア12
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。