display: flex, flex-shrink: 0配下で文字列が折返しできない問題

css
1display: flex;
2flex-shrink: 0;

だと文字列がはみ出てしまいますが、

css
1display: block !important;
2flex-shrink: 1 !important;

display: block + flex-shrink: 1にすると改善されました。

上記現象についていつくか質問させてください。

質問1.

文字列折り返しできない問題は
word-breakとかoverflow-wrapで解決できると思いましたが、display: flex;配下ではまったく効きませんでした。

display: flex;配下ではword-breakとかoverflow-wrapは効かない仕様でしょうか？

質問2.

display: blockでもflex-shrinkのオプションは有効に使われますか？

今まで、display: flexの時だけflex-shrinkのオプションが有効だと思いましたが、
display: blockだけではなくflex-shrinkも1にしないと問題が解決できなかったので
今までの自分の理解が誤ってたのかの確認をしたいです。

質問3.

そもそもdisplay: block + flex-shrink: 1することでなぜ折返しできない問題が改善されますか？

全体のコードはこちらです。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title>Hello Bulma!</title>
7    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
8  </head>
9  <body>
10    <section class="section has-background-white-ter">
11        <div class="container">
12            <div class="columns is-tablet is-centered">
13                <div class="column is-three-fifths has-background-white">
14                    <div class="level is-mobile">
15                        <div class="level-left level-left-flex-off">
16                            <div class="level-item">
17                                <h1 class="title is-size-4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
18                            </div>
19                        </div>
20
21                    </div>
22                    <style type="text/css">.level-left-flex-off{display:block !important;flex-shrink:1 !important}</style>
23                    
24                </div>
25            </div>
26        </div>
27    </section>
28
29  <!-- <section class="section">
30    <div class="container">
31      <h1 class="title">
32        Hello World
33      </h1>
34      <p class="subtitle">
35        My first website with <strong>Bulma</strong>!
36      </p>
37    </div>
38  </section>-->
39  </body>
40</html>

行動規範の内容に同意します

回答2件

ベストアンサー

質問者さんの疑問点からFlexboxにおいてのフレックスコンテナとフレックスアイテムについて理解ができてないのかなと感じました。
display: flex;が設定された要素がフレックスコンテナになります。その子要素がフレックスアイテムになります。
flex-shrinkはフレックスアイテムに設定するプロパティです。
まずは、その点を理解してください。（できていたのならすみせまでした。）
フレックスコンテナとフレックスアイテムについては、Lhankor_Mhyさんの回答にも指摘があります。

次に、CSSフレームワークの BULMA を使ってますね。
CSSフレームワークを使うメリットは、CSSは使わずに、HTMLでのクラス設定のみでレイアウトや装飾が可能な点です。独自のCSSを設定する場合は、CSSフレームワークのCSS設定とバッティングしないようにする必要があります。
今回の症状はCSSフレームワークの設定と関連して発生しているものなので、それを無視して議論して無意味です。

まず、.level-left-flex-off{display:block !important;flex-shrink:1 !important} というCSSを設定していますが、とりあえずこれを削除してCSSフレームワークのみの設定にしてみてください。すると、文字列が折返しされずにはみ出ます。つまり、独自に指定したCSSの設定の問題ではなくBULMAの設定がそうなっているからです。

HTMLのBULMAの設定を検証ツールで確認してみましょう。
関係するところだけ抜き出します。

html
1                    <div class="level is-mobile"> /* 親 */
2                        <div class="level-left level-left-flex-off"> /* 子 */
3                            <div class="level-item">  /* 孫 */
4                                <h1 class="title is-size-4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
5                            </div>
6                        </div>
7
8                    </div>

親から孫までのそれぞれに level level-left level-item のクラスが設定されています。このどのクラスにもdisplay: flex;が設定されています。つまり、この親、子、孫はすべてフレックスコンテナであり、子と孫はフレックスアイテムでもあります。
さらに、level-left level-item のクラスにはflex-shrink: 0;が設定されているので、子と孫は縮小されません。そのため中身のテキストが折り返されずにはみ出ます。

次に .level-left-flex-off(子)に、下記のように独自CSSを設定します。

css
1.level-left-flex-off {
2  display: flex;
3  flex-shrink: 1;
4}

子はflex-shrink: 1;になりましたが、孫のflex-shrink: 0;は活きていますので縮小されることがないので折り返されません。
つまり、

display: flex;配下ではword-breakとかoverflow-wrapは効かない仕様でしょうか？

は全く関係なく、孫のflex-shrink: 0;が効いているから折り返されないだけです。

そもそもdisplay: block + flex-shrink: 1することでなぜ折返しできない問題が改善されますか？

display: blockとすることでその要素はフレックスコンテナではなくなります。すると子要素はフレックスアイテムではなくなります。フレックスアイテムにおいて有効なflex-shrinkも無効になります。

つまり、子にdisplay: blockを設定したので孫のflex-shrink: 0;が無効になりました。そのため、子も孫も縮小するようになり折り返されるようになったのです。

BULMAは私は使ったことがないので、level level-left level-item はどの用途のもので、なぜ、flex-shrink: 0;が設定されているかは分かりませんが、CSSフレームワークを使うなら、極力独自のCSSは使わない。使うなら、フレームワークの設定を理解したうえで、それととバッティングしないように注意して、使用するようにすべきでしょう。

投稿2021/03/27 05:53

編集2021/03/27 09:25