###前提・実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。