Q&A
> はみ出さないようにする方法
というのは、今回で言えばブラウザの横幅を狭めたらinline-blockの要素が折り返して、縦に並ぶようにということでしょうか？
それとも、赤い親要素部分が横に並んだinline-blockの要素の幅まで伸びるようになってほしいということでしょうか？
下記サンプルを実行していただければ解りやすいと思います。
ウィンドウの幅を狭くして、右へスクロールすると再現されます。
ある条件の元で inline-block 要素から子要素がはみ出てしまうのですが、はみ出さないようにする方法を教えて欲しいです。
一般に、inline-block 要素は width を指定しなければ、子要素の数や大きさに応じて自動的に自分の幅を広げてくれます。しかし例えば下記３つの条件が揃った場合、子要素ははみ出してしまいます。
- 子要素の数が2つ以上
- 横に並んだ子要素の幅の合計が、ブラウザのクライアント領域より大きい
- 子要素の幅が更にその中身によって複雑に規定されている
こういう場合 inline-block 要素の幅は、クライアント領域の幅が上限となり、画面をスクロールすると、子要素ははみ出てしまいます。無論、子要素の幅と個数がわかっていれば width を設定するなどすれば回避できますが、子要素の幅と個数は可変です。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<HEAD> 4<meta charset="UTF-8"> 5<title>TEST</title> 6<style> 7* { padding:0;margin:0;box-sizing: border-box;} 8html,body{ 9 height:100%; 10 width:100%; 11} 12body{ 13 background:#eee; 14 text-align: center; 15} 16#app { 17 display: inline-block; 18 background: red; 19 white-space: nowrap; 20 height: 150px; 21} 22#app>div { 23 display:inline-block; 24} 25.table { 26 display:table; 27} 28.table>div{ 29 display:table-row; 30} 31.table>div>div{ 32 display:table-cell; 33 width:400px; 34 height:100px; 35 background:blue; 36 border:1px solid yellow; 37} 38</style> 39</HEAD> 40<body> 41 <div id="app"> 42 <div> 43 <h3>title</h3> 44 <div class="table"> 45 <div> 46 <div></div> 47 </div> 48 </div> 49 </div> 50 <div> 51 <h3>title</h3> 52 <div class="table"> 53 <div> 54 <div></div> 55 </div> 56 </div> 57 </div> 58 </div> 59</body> 60</html>
回答2件
0
id: app の white-space: nowrap; を削除。
投稿2021/01/12 00:33
総合スコア784
0
ベストアンサー
下記でどうでしょう。
css
1#app>div { 2 display:inline-block; 3 width: max-content; /* 追加 */ 4}
ただし、IEは非対応です。
投稿2021/01/10 10:50
総合スコア34075
あなたの回答
tips
プレビュー
