質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3705閲覧

inline-block 要素から子要素がはみ出してしまう

ophiacodon

総合スコア24

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/09 11:29

下記サンプルを実行していただければ解りやすいと思います。
ウィンドウの幅を狭くして、右へスクロールすると再現されます。

ある条件の元で inline-block 要素から子要素がはみ出てしまうのですが、はみ出さないようにする方法を教えて欲しいです。

一般に、inline-block 要素は width を指定しなければ、子要素の数や大きさに応じて自動的に自分の幅を広げてくれます。しかし例えば下記3つの条件が揃った場合、子要素ははみ出してしまいます。

  1. 子要素の数が2つ以上
  2. 横に並んだ子要素の幅の合計が、ブラウザのクライアント領域より大きい
  3. 子要素の幅が更にその中身によって複雑に規定されている

こういう場合 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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mattari_panda

2021/01/09 12:18

> はみ出さないようにする方法 というのは、今回で言えばブラウザの横幅を狭めたらinline-blockの要素が折り返して、縦に並ぶようにということでしょうか? それとも、赤い親要素部分が横に並んだinline-blockの要素の幅まで伸びるようになってほしいということでしょうか?
ophiacodon

2021/01/09 13:47

ブラウザの横幅を狭めても、inline-block要素の幅が変わらないようにしたいです。
guest

回答2

0

id: app の white-space: nowrap; を削除。

投稿2021/01/12 00:33

takna

総合スコア784

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ophiacodon

2021/01/15 10:26

折返しはしたくないんですよね。
guest

0

ベストアンサー

下記でどうでしょう。

css

1#app>div { 2 display:inline-block; 3 width: max-content; /* 追加 */ 4}

ただし、IEは非対応です。

投稿2021/01/10 10:50

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ophiacodon

2021/01/15 10:25

ありがとうございます。 こんなプロパティ値があったんですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問