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

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

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

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

HTML5

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

Q&A

解決済

2回答

5262閲覧

flexで横並びにした要素で、長いテキストがはみ出る

_shizu

総合スコア21

CSS3

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

HTML5

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

0グッド

2クリップ

投稿2019/02/23 06:06

編集2019/02/23 06:08

閲覧ありがとうございます。

flexで横並びにし、
「タイトル」は100px固定、
「テキスト」は「タイトル」以外の幅いっぱいに広げるために、
flex: 1 0 auto; を指定しています。
「テキスト」の文字数が少ない時はこのままでも良いのですが、
文字数が多くなると、改行がなされずはみ出てしまいます。

「テキスト」の横幅を指定すれば解決するのですが、
「テキスト」を「タイトル」以外の幅いっぱいに広げ、且つはみ出さずに改行もさせる
flex系や何かの指定があればと思い、質問させていただきました。

▼CodePen
https://codepen.io/0166/pen/ErqKrz

▼上:文字数が少なく理想の見た目のもの 下:文字数が多く崩れてしまったもの
※なお、ピンクの要素にはwidth: 300px;を指定しております。
イメージ説明

HTML

1<div id="container"> 2 <div class="wrapper"> 3 <div class="box"> 4 <p class="ttl">タイトルタイトル</p> 5 <p class="txt">あああああああああああああああああああ</p> 6 </div> 7 <div class="box"> 8 <div> 9 <p class="ttl">タイトルタイトル</p> 10 <p class="txt">あああああああああああああああああああ</p> 11 </div> 12 <div> 13 <p class="ttl">タイトル</p> 14 <p class="txt">あああああああああああああああああああ</p> 15 </div> 16 </div> 17 <div class="box"> 18 <p class="ttl">タイトル</p> 19 <p class="txt">あああああああああああああああああああ</p> 20 </div> 21 </div> 22 <div class="wrapper"> 23 <div class="box"> 24 <p class="ttl">タイトルタイトル</p> 25 <p class="txt">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 26 </div> 27 <div class="box"> 28 <div> 29 <p class="ttl">タイトルタイトル</p> 30 <p class="txt">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 31 </div> 32 <div> 33 <p class="ttl">タイトル</p> 34 <p class="txt">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 35 </div> 36 </div> 37 <div class="box"> 38 <p class="ttl">タイトル</p> 39 <p class="txt">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 40 </div> 41 </div> 42</div> 43 44</body> 45</html>

CSS

1* { 2 box-sizing: border-box; 3} 4.container { 5 padding: 50px; 6} 7.wrapper { 8 width: 800px; 9 border: 1px solid #65aaff; 10 margin: 20px auto 0; 11} 12.box { 13 display:-webkit-box; 14 display:-ms-flexbox; 15 display: flex; 16} 17.box:not(:last-of-type) { 18 border-bottom: 1px solid #65aaff; 19} 20.ttl { 21 margin: 0; 22 background: #daffff; 23 padding: 10px; 24 width: 100px; 25 display:-webkit-box; 26 display:-ms-flexbox; 27 display: flex; 28 -webkit-box-pack: center; 29 -ms-flex-pack: center; 30 justify-content: center; 31 -webkit-box-align: center; 32 -ms-flex-align: center; 33 align-items: center; 34 border-right: 1px solid #65aaff; 35} 36.txt { 37 margin: 0; 38 background: #a0d3ff; 39 padding: 10px; 40 display:-webkit-box; 41 display:-ms-flexbox; 42 display: flex; 43 -webkit-box-align: center; 44 -ms-flex-align: center; 45 align-items: center; 46 -webkit-box-flex: 1 0 auto; 47 -ms-flex: 1 0 auto; 48 flex: 1 0 auto; 49} 50.box > div { 51 display:-webkit-box; 52 display:-ms-flexbox; 53 display: flex; 54} 55.box > div:nth-of-type(1) .txt { 56 width: 200px; 57 background: #ffd5ff; 58 border-right: 1px solid #65aaff; 59} 60.box > div:nth-of-type(2) { 61 -webkit-box-flex: 1 0 auto; 62 -ms-flex: 1 0 auto; 63 flex: 1 0 auto; 64}

 
以上になります。
「テキスト」の幅を指定する方法以外で、
「テキスト」を「タイトル」以外の幅いっぱいに広げ、且つはみ出さずに改行もさせる
ということが実現する方法がありましたら、教えていただけますと幸いです。
よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

CodePen (変更箇所にコメントを入れています)

テキスト.txtが親要素の中に収まるようにするためにflexの2つ目のオプション、つまりflex-shrinkを1にしています。タイトル.ttlは伸びも縮みもしてほしくないのでflex-growflex-shrinkも0にしています。

flex - MDN

追記

.box > div:nth-of-type(2)については親要素.boxに合わせて伸び縮みしてほしいのでflex: 1 1 autoになっています。

追記2

IE11で表示が崩れる原因はよく分かりませんでしたが、.box > div:nth-of-type(1)flex-shrinkを0にすると直りました。(flexの2つ目の値に対応しています)

IEはFlexboxに関するバグがいろいろあるため正常な動作は期待しないほうがいいかもしれません。
Flexbugs - GitHub

最終的なCSS

css

1* { 2 box-sizing: border-box; 3} 4.container { 5 padding: 50px; 6} 7.wrapper { 8 width: 800px; 9 border: 1px solid #65aaff; 10 margin: 20px auto 0; 11} 12.box { 13 display:-webkit-box; 14 display:-ms-flexbox; 15 display: flex; 16} 17.box:not(:last-of-type) { 18 border-bottom: 1px solid #65aaff; 19} 20.ttl { 21 margin: 0; 22 background: #daffff; 23 padding: 10px; 24 width: 100px; 25 flex: 0 0 auto; 26 display:-webkit-box; 27 display:-ms-flexbox; 28 display: flex; 29 -webkit-box-pack: center; 30 -ms-flex-pack: center; 31 justify-content: center; 32 -webkit-box-align: center; 33 -ms-flex-align: center; 34 align-items: center; 35 border-right: 1px solid #65aaff; 36} 37.txt { 38 margin: 0; 39 background: #a0d3ff; 40 padding: 10px; 41 display:-webkit-box; 42 display:-ms-flexbox; 43 display: flex; 44 -webkit-box-align: center; 45 -ms-flex-align: center; 46 align-items: center; 47 -webkit-box-flex: 1 1 auto; 48 -ms-flex: 1 1 auto; 49 flex: 1 1 auto; 50} 51.box > div { 52 display:-webkit-box; 53 display:-ms-flexbox; 54 display: flex; 55} 56.box > div:nth-of-type(1){ 57 -webkit-box-flex: 0 0 auto; /* added */ 58 -ms-flex: 0 0 auto; /* added */ 59 flex: 0 0 auto; /* added */ 60} 61.box > div:nth-of-type(1) .txt { 62 width: 200px; 63 background: #ffd5ff; 64 border-right: 1px solid #65aaff; 65} 66.box > div:nth-of-type(2) { 67 -webkit-box-flex: 1 1 auto; 68 -ms-flex: 1 1 auto; 69 flex: 1 1 auto; 70} 71

投稿2019/02/23 07:09

編集2019/03/02 11:13
karamarimo

総合スコア2551

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

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

_shizu

2019/03/02 08:44

ご回答ありがとうございます! flexだけで行える、理想的な指定方法です! ただ、一つ気になる点がございまして、 IE11でこちらの方法を試しますと、崩れてしまいます。 私では原因がよく分からず… よろしければ一度ご確認いただけますと幸いです。 よろしくお願い致します。
_shizu

2019/03/02 15:07

追記ありがとうございます! こちらのCSSで、IE11でも崩れないことを確認致しました。 IEはFlexboxに関するバグが多いのですね…気を付けます! ありがとうございました!
guest

0

https://codepen.io/anon/pen/qgeNJR?editors=1100

※他にベストプラクティスがあるかもしれないのと、結果的に幅指定しているのでご了承ください。

やり方としては、1段目と3段目はwidth: calc(100%-100px)としてタイトル以外の最大幅にし、
2段目は1カラム目と2カラム目にクラスをつけてそれぞれwidth: 50%:
とすることで、1段目の半分の幅を基準に最大まで表示しています。
青い部分とピンク部分の幅を調整したければこのwidthを変えればいけます。

投稿2019/02/23 06:36

yu-smc

総合スコア610

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

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

_shizu

2019/03/02 08:39

ご回答ありがとうございます! このような横幅の指定の仕方もあるのですね。 勉強になりました。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問