Q&A
flex を使って要素を横並びにしています。
それぞれの子要素の中にはとても横に長いコンテンツが入る場合があり、その場合は子要素に横スクロールバーが出るようにしたいと考えています。
下記のサンプルでは２つの子要素があるので幅50％で左右に並び、それぞれの子要素にスクロールバーが表示される想定だったのですが、
実際はコンテンツの分横に伸び、子要素にはスクロールバーが表示されず、ブラウザ全体の横スクロールバーが出てしまいました。
期待する表示を実現するにはどのようにすればいいのでしょうか？
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"> 8 <style> 9 .wrapper { 10 display: flex; 11 } 12 13 .panel { 14 flex: 1; 15 background-color: lightcyan; 16 } 17 18 .panel + .panel { 19 background-color: lightpink; 20 } 21 22 .inner { 23 overflow-x: scroll; 24 } 25 26 .content { 27 height: 300px; 28 width: 2000px; 29 } 30 </style> 31</head> 32<body> 33<div class="wrapper"> 34 <div class="panel"> 35 <h5>demo 1</h5> 36 <div class="inner"> 37 <div class="content"> 38 content 1 39 </div> 40 </div> 41 </div> 42 43 <div class="panel"> 44 <h5>demo 2</h5> 45 <div class="inner"> 46 <div class="content"> 47 content 2 48 </div> 49 </div> 50 </div> 51</div> 52</body> 53</html>
回答1件
0
.panel にスクロールバーを付ければいいのでは。
css
1.panel { 2 flex: 1; 3 background-color: lightcyan; 4 overflow-x: scroll; 5}
投稿2020/04/20 06:40
総合スコア34075
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/20 06:46
2020/04/20 06:56
2020/04/20 07:02