回答編集履歴
10
修正
answer
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
## 原因
|
|
2
|
-
この問題の主な原因は、**flex アイテムの配置方法**(`align-items`プロパティ)です。flex アイテムに設定される`min-width`プロパティの初期値とは関係がありません。
|
|
2
|
+
この問題の主な原因は、**flex アイテムの配置方法** (`align-items`プロパティ) です。flex アイテムに設定される`min-width`プロパティの初期値とは関係がありません。
|
|
3
3
|
|
|
4
|
-
`align-items`プロパティを指定しない状態では、 flex アイテムの幅が flex コンテナの幅に合う(`width: 100%`みたいな感じ)ように動作します。そのため、 flex アイテムの子要素である長い URL にも、うまく折り返しが行われます([見本](https://codepen.io/anon/pen/jQeNWY))。
|
|
4
|
+
`align-items`プロパティを指定しない状態では、 flex アイテムの幅が flex コンテナの幅に合う (`width: 100%`みたいな感じ) ように動作します。そのため、 flex アイテムの子要素である長い URL にも、うまく折り返しが行われます ([見本](https://codepen.io/anon/pen/jQeNWY)) 。
|
|
5
5
|
|
|
6
6
|
```HTML
|
|
7
7
|
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
しかし、初期値以外の値を指定すると、 **flex アイテムの幅はアイテム内のコンテンツの幅となり**、整列されます。そのため、`overflow-wrap`プロパティは折り返しをすることなく、長い URL は flex コンテナからはみ出します([見本](https://codepen.io/anon/pen/Xyxrdo))。対して、`word-break`プロパティは flex コンテナからはみ出そうになると、強制的に改行するので、質問文のような現象が起こります(たぶん)。
|
|
26
|
+
しかし、初期値以外の値を指定すると、 **flex アイテムの幅はアイテム内のコンテンツの幅となり**、整列されます。そのため、`overflow-wrap`プロパティは折り返しをすることなく、長い URL は flex コンテナからはみ出します ([見本](https://codepen.io/anon/pen/Xyxrdo)) 。対して、`word-break`プロパティは flex コンテナからはみ出そうになると、強制的に改行するので、質問文のような現象が起こります (たぶん) 。
|
|
27
27
|
|
|
28
28
|
```CSS
|
|
29
29
|
.box1 {
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
`width`, `max-width`プロパティを指定し、 flex アイテムに`align-items: stretch`と同じ役割を設定することで、`overflow-wrap`プロパティは折り返しを行うようになります。
|
|
44
44
|
|
|
45
|
-
上記のことから、質問文のコードを修正すると、[このように](https://codepen.io/anon/pen/PxdMVN)なります(コードが長かったので CodePen に上げました)。
|
|
45
|
+
上記のことから、質問文のコードを修正すると、[このように](https://codepen.io/anon/pen/PxdMVN)なります (コードが長かったので CodePen に上げました) 。
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
---
|
|
@@ -55,13 +55,13 @@
|
|
|
55
55
|
`flex-direction: row;`と、`flex-direction: column`, `align-items: start`を設定したときの2つの場合で、なぜ長い単語がはみ出るのかを以下に追記します。
|
|
56
56
|
|
|
57
57
|
### `flex-direction: row;`の場合
|
|
58
|
-
|
|
58
|
+
`min-width`プロパティの値が flex アイテムの内容 (折り返しを考慮しない時の単語の長さ) になり、これが`flex-basis`プロパティの値よりも優先して適用されるため、はみ出します。
|
|
59
59
|
|
|
60
60
|
このとき、`min-width: 0;`を設定すると、最小横幅の制約がなくなり、`flex-basis`プロパティの初期値が適用されます。その結果、 flex アイテムは flex コンテナの幅に合わせて伸縮するようになります。
|
|
61
61
|
|
|
62
62
|
### `flex-direction: column`, `align-items: start`の場合
|
|
63
|
-
flexbox 特有の最小幅による制約は、**主軸に**かかります。今回考えている横幅方向は**交叉軸**のため、`min-width: auto;`の値は、 flexbox 特有のものとは別の算出値(たぶん`0`)となります。そのため、**`min-width`プロパティは、はみ出してしまう問題と無関係**だとわかります。
|
|
63
|
+
flexbox 特有の最小幅による制約は、**主軸に**かかります。今回考えている横幅方向は**交叉軸**のため、`min-width: auto;`の値は、 flexbox 特有のものとは別の算出値 (たぶん`0`) となります。そのため、**`min-width`プロパティは、はみ出してしまう問題と無関係**だとわかります。
|
|
64
64
|
|
|
65
|
-
交叉軸における幅は、 flex アイテムの内容により決まります。 (恐らく、このときに`word-wrap`プロパティによる単語の折り返しが、考慮されていません。) そのため、交叉軸における幅(今回は`width`プロパティの値)は、折り返しを考慮しない時の単語の長さとなり、 flex コンテナをはみ出します。ここで、もしも`align-items: stretch;`を設定していれば、 flex アイテムの幅は flex コンテナと同じ幅になるため、長い単語がはみ出すことはありません。
|
|
65
|
+
交叉軸における幅は、** flex アイテムの内容により決まります**。 (恐らく、このときに`word-wrap`プロパティによる単語の折り返しが、考慮されていません。) そのため、交叉軸における幅(今回は`width`プロパティの値)は、折り返しを考慮しない時の単語の長さとなり、 flex コンテナをはみ出します。 (ここで、もしも`align-items: stretch;`を設定していれば、** flex アイテムの交叉軸における幅は flex コンテナと同じ幅になる**ため、長い単語がはみ出すことはありません。)
|
|
66
66
|
|
|
67
67
|
このとき、`width`, `max-width`プロパティを使い、設定された横幅を上書きするか、 flex コンテナ以下の最大横幅値を設定することで、 flex アイテムが flex コンテナからはみ出さなくなります。
|
9
追記
answer
CHANGED
|
@@ -62,6 +62,6 @@
|
|
|
62
62
|
### `flex-direction: column`, `align-items: start`の場合
|
|
63
63
|
flexbox 特有の最小幅による制約は、**主軸に**かかります。今回考えている横幅方向は**交叉軸**のため、`min-width: auto;`の値は、 flexbox 特有のものとは別の算出値(たぶん`0`)となります。そのため、**`min-width`プロパティは、はみ出してしまう問題と無関係**だとわかります。
|
|
64
64
|
|
|
65
|
-
交叉軸における幅は、 flex アイテムの内容により決まります。 (恐らく、このときに`word-wrap`プロパティによる単語の折り返しが、考慮されていません。) そのため、交叉軸における幅(今回は`width`プロパティの値)は、折り返しを考慮しない時の単語の長さとなり、 flex コンテナをはみ出します。
|
|
65
|
+
交叉軸における幅は、 flex アイテムの内容により決まります。 (恐らく、このときに`word-wrap`プロパティによる単語の折り返しが、考慮されていません。) そのため、交叉軸における幅(今回は`width`プロパティの値)は、折り返しを考慮しない時の単語の長さとなり、 flex コンテナをはみ出します。ここで、もしも`align-items: stretch;`を設定していれば、 flex アイテムの幅は flex コンテナと同じ幅になるため、長い単語がはみ出すことはありません。
|
|
66
66
|
|
|
67
67
|
このとき、`width`, `max-width`プロパティを使い、設定された横幅を上書きするか、 flex コンテナ以下の最大横幅値を設定することで、 flex アイテムが flex コンテナからはみ出さなくなります。
|
8
修正
answer
CHANGED
|
@@ -51,7 +51,8 @@
|
|
|
51
51
|
|
|
52
52
|
> 横方向 Flex で `min-width: 0;` が効くのに 縦方向 Flex で `min-width: 0;` が効かない点だけイマイチしっくりこない
|
|
53
53
|
|
|
54
|
-
「縦方向 Flex
|
|
54
|
+
回答文の最初のほうにも書いたとおり、「縦方向 Flex」で単語がはみ出す原因に、**`min-width`プロパティは一切関係がありません**。
|
|
55
|
+
`flex-direction: row;`と、`flex-direction: column`, `align-items: start`を設定したときの2つの場合で、なぜ長い単語がはみ出るのかを以下に追記します。
|
|
55
56
|
|
|
56
57
|
### `flex-direction: row;`の場合
|
|
57
58
|
`min-width`プロパティの値が flex アイテムの内容(折り返しを考慮しない時の単語の長さ)そのものになり、これが`flex-basis`プロパティの値よりも優先して適用されるため、はみ出します。
|
|
@@ -59,8 +60,8 @@
|
|
|
59
60
|
このとき、`min-width: 0;`を設定すると、最小横幅の制約がなくなり、`flex-basis`プロパティの初期値が適用されます。その結果、 flex アイテムは flex コンテナの幅に合わせて伸縮するようになります。
|
|
60
61
|
|
|
61
62
|
### `flex-direction: column`, `align-items: start`の場合
|
|
62
|
-
最小幅による制約は**主軸に**かかります。今回考えている横幅方向は**交叉軸**のため、`min-width: auto;`の値は、 flexbox 特有のものとは別の算出値(たぶん`0`)
|
|
63
|
+
flexbox 特有の最小幅による制約は、**主軸に**かかります。今回考えている横幅方向は**交叉軸**のため、`min-width: auto;`の値は、 flexbox 特有のものとは別の算出値(たぶん`0`)となります。そのため、**`min-width`プロパティは、はみ出してしまう問題と無関係**だとわかります。
|
|
63
64
|
|
|
64
|
-
交叉軸における幅は、 flex アイテムの内容により決まります。恐らく、このときに`word-wrap`プロパティによる単語の折り返しが、考慮されていません。そのため、交叉軸における幅(今回は`width`プロパティの値)は、折り返しを考慮しない時の単語の長さとなり、 flex コンテナをはみ出します。
|
|
65
|
+
交叉軸における幅は、 flex アイテムの内容により決まります。 (恐らく、このときに`word-wrap`プロパティによる単語の折り返しが、考慮されていません。) そのため、交叉軸における幅(今回は`width`プロパティの値)は、折り返しを考慮しない時の単語の長さとなり、 flex コンテナをはみ出します。
|
|
65
66
|
|
|
66
|
-
このとき、`width`, `max-width`プロパティを使い、設定された横幅を上書きするか、 flex コンテナ
|
|
67
|
+
このとき、`width`, `max-width`プロパティを使い、設定された横幅を上書きするか、 flex コンテナ以下の最大横幅値を設定することで、 flex アイテムが flex コンテナからはみ出さなくなります。
|
7
追記
answer
CHANGED
|
@@ -42,4 +42,25 @@
|
|
|
42
42
|
|
|
43
43
|
`width`, `max-width`プロパティを指定し、 flex アイテムに`align-items: stretch`と同じ役割を設定することで、`overflow-wrap`プロパティは折り返しを行うようになります。
|
|
44
44
|
|
|
45
|
-
上記のことから、質問文のコードを修正すると、[このように](https://codepen.io/anon/pen/PxdMVN)なります(コードが長かったので CodePen に上げました)。
|
|
45
|
+
上記のことから、質問文のコードを修正すると、[このように](https://codepen.io/anon/pen/PxdMVN)なります(コードが長かったので CodePen に上げました)。
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## コメントへの返信
|
|
51
|
+
|
|
52
|
+
> 横方向 Flex で `min-width: 0;` が効くのに 縦方向 Flex で `min-width: 0;` が効かない点だけイマイチしっくりこない
|
|
53
|
+
|
|
54
|
+
「縦方向 Flex 」で単語がはみ出す原因に、**`min-width`プロパティは一切関係がありません**。
|
|
55
|
+
|
|
56
|
+
### `flex-direction: row;`の場合
|
|
57
|
+
`min-width`プロパティの値が flex アイテムの内容(折り返しを考慮しない時の単語の長さ)そのものになり、これが`flex-basis`プロパティの値よりも優先して適用されるため、はみ出します。
|
|
58
|
+
|
|
59
|
+
このとき、`min-width: 0;`を設定すると、最小横幅の制約がなくなり、`flex-basis`プロパティの初期値が適用されます。その結果、 flex アイテムは flex コンテナの幅に合わせて伸縮するようになります。
|
|
60
|
+
|
|
61
|
+
### `flex-direction: column`, `align-items: start`の場合
|
|
62
|
+
最小幅による制約は**主軸に**かかります。今回考えている横幅方向は**交叉軸**のため、`min-width: auto;`の値は、 flexbox 特有のものとは別の算出値(たぶん`0`)が用いられます。そのため、**`min-width`プロパティは、はみ出してしまう問題と無関係**だとわかります。
|
|
63
|
+
|
|
64
|
+
交叉軸における幅は、 flex アイテムの内容により決まります。恐らく、このときに`word-wrap`プロパティによる単語の折り返しが、考慮されていません。そのため、交叉軸における幅(今回は`width`プロパティの値)は、折り返しを考慮しない時の単語の長さとなり、 flex コンテナをはみ出します。
|
|
65
|
+
|
|
66
|
+
このとき、`width`, `max-width`プロパティを使い、設定された横幅を上書きするか、 flex コンテナより小さい横幅最大値を設定することで、 flex アイテムが flex コンテナからはみ出さなくなります。
|
6
修正
answer
CHANGED
|
@@ -30,8 +30,7 @@
|
|
|
30
30
|
display: flex;
|
|
31
31
|
flex-direction: column;
|
|
32
32
|
border: 3px solid yellow;
|
|
33
|
-
align-items: start;
|
|
34
|
-
/* 初期値から変更。 */
|
|
33
|
+
align-items: start; /* 初期値から変更。 */
|
|
35
34
|
}
|
|
36
35
|
.box1 .box2 {
|
|
37
36
|
border: 3px solid green;
|
5
追記
answer
CHANGED
|
@@ -1,10 +1,44 @@
|
|
|
1
1
|
## 原因
|
|
2
2
|
この問題の主な原因は、**flex アイテムの配置方法**(`align-items`プロパティ)です。flex アイテムに設定される`min-width`プロパティの初期値とは関係がありません。
|
|
3
3
|
|
|
4
|
-
`align-items`プロパティを指定しない状態では、 flex アイテムの幅が flex コンテナの幅に合う(`width: 100%`みたいな感じ)ように動作します。そのため、 flex アイテムの子要素である長い URL にも、うまく折り返しが行われます。
|
|
4
|
+
`align-items`プロパティを指定しない状態では、 flex アイテムの幅が flex コンテナの幅に合う(`width: 100%`みたいな感じ)ように動作します。そのため、 flex アイテムの子要素である長い URL にも、うまく折り返しが行われます([見本](https://codepen.io/anon/pen/jQeNWY))。
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
```HTML
|
|
7
7
|
|
|
8
|
+
<div class="box1">
|
|
9
|
+
<div class="box2">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
|
|
10
|
+
</div>
|
|
11
|
+
```
|
|
12
|
+
```CSS
|
|
13
|
+
.box1 {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
border: 3px solid yellow;
|
|
17
|
+
align-items: stretch; /* 初期値なので指定しなくても良い。 */
|
|
18
|
+
}
|
|
19
|
+
.box1 .box2 {
|
|
20
|
+
border: 3px solid green;
|
|
21
|
+
overflow-wrap: break-word;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
しかし、初期値以外の値を指定すると、 **flex アイテムの幅はアイテム内のコンテンツの幅となり**、整列されます。そのため、`overflow-wrap`プロパティは折り返しをすることなく、長い URL は flex コンテナからはみ出します([見本](https://codepen.io/anon/pen/Xyxrdo))。対して、`word-break`プロパティは flex コンテナからはみ出そうになると、強制的に改行するので、質問文のような現象が起こります(たぶん)。
|
|
27
|
+
|
|
28
|
+
```CSS
|
|
29
|
+
.box1 {
|
|
30
|
+
display: flex;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
border: 3px solid yellow;
|
|
33
|
+
align-items: start;
|
|
34
|
+
/* 初期値から変更。 */
|
|
35
|
+
}
|
|
36
|
+
.box1 .box2 {
|
|
37
|
+
border: 3px solid green;
|
|
38
|
+
overflow-wrap: break-word;
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
8
42
|
## 解決策
|
|
9
43
|
|
|
10
44
|
`width`, `max-width`プロパティを指定し、 flex アイテムに`align-items: stretch`と同じ役割を設定することで、`overflow-wrap`プロパティは折り返しを行うようになります。
|
4
編集
answer
CHANGED
|
@@ -1,53 +1,12 @@
|
|
|
1
|
+
## 原因
|
|
1
|
-
|
|
2
|
+
この問題の主な原因は、**flex アイテムの配置方法**(`align-items`プロパティ)です。flex アイテムに設定される`min-width`プロパティの初期値とは関係がありません。
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
`align-items`プロパティを指定しない状態では、 flex アイテムの幅が flex コンテナの幅に合う(`width: 100%`みたいな感じ)ように動作します。そのため、 flex アイテムの子要素である長い URL にも、うまく折り返しが行われます。
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
しかし、初期値以外の値を指定すると、 **flex アイテムの幅はアイテム内のコンテンツの幅となり**、整列されます。そのため、`overflow-wrap`プロパティは折り返しをすることなく、長い URL は flex コンテナからはみ出します。
|
|
6
|
-
0. `.iMCKzi`から`word-break`プロパティを外す。
|
|
7
|
-
0. `.bwOsYo`に`min-width: 0`を設定する。
|
|
8
|
-
0. `.gspcJG`に`max-width: 100%`を設定する。
|
|
9
7
|
|
|
8
|
+
## 解決策
|
|
10
9
|
|
|
11
|
-
|
|
10
|
+
`width`, `max-width`プロパティを指定し、 flex アイテムに`align-items: stretch`と同じ役割を設定することで、`overflow-wrap`プロパティは折り返しを行うようになります。
|
|
12
11
|
|
|
13
|
-
以下の HTML, CSS を基に考えます。
|
|
14
|
-
|
|
15
|
-
まず、`align-items`プロパティの初期値は`stretch`です。
|
|
16
|
-
|
|
12
|
+
上記のことから、質問文のコードを修正すると、[このように](https://codepen.io/anon/pen/PxdMVN)なります(コードが長かったので CodePen に上げました)。
|
|
17
|
-
```pug
|
|
18
|
-
div.box1
|
|
19
|
-
div.box2
|
|
20
|
-
div.url http://example.com/veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryloooooooooooooooooooooooooooooooooooooongurl
|
|
21
|
-
```
|
|
22
|
-
```scss
|
|
23
|
-
.box1 {
|
|
24
|
-
display: flex;
|
|
25
|
-
flex-direction: column;
|
|
26
|
-
|
|
27
|
-
.url {
|
|
28
|
-
overflow-wrap: break-word;
|
|
29
|
-
word-wrap: break-word;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
ここで、下記コードのように、`.box1`の`align-items`プロパティに`flex-start`を指定したとしましょう。
|
|
35
|
-
すると、 flex アイテム は flex コンテナの横幅いっぱいに広がらず、始点側の端に寄るだけになります。つまり、 flex コンテナより flex アイテムの横幅の方が大きい場合、 flex アイテムは flex コンテナからはみ出します([動作確認用リンク](https://codepen.io/anon/pen/aQKQQK))。
|
|
36
|
-
|
|
37
|
-
```scss
|
|
38
|
-
.box1 {
|
|
39
|
-
display: flex;
|
|
40
|
-
flex-direction: column;
|
|
41
|
-
align-items: flex-start;
|
|
42
|
-
|
|
43
|
-
.url {
|
|
44
|
-
overflow-wrap: break-word;
|
|
45
|
-
word-wrap: break-word;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
そんなわけで、 長いテキストがはみ出してしまったのではないかと思います。
|
|
51
|
-
`word-break`プロパティでのみ改行が正常に行えたのは、横幅が要素の内容によって変化する場合の折り返しにも`word-break`プロパティが対応していたからだと思います。`overflow-wrap`プロパティは、横幅を決めなければ折り返しを行いません。
|
|
52
|
-
|
|
53
|
-
ここまで来れば、`max-width`, `width`プロパティなどを使い横幅を強制することで、今回の問題が解決するとわかります([動作確認用リンク](https://codepen.io/anon/pen/LXrXaM))。
|
3
修正
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
[再現した](https://codepen.io/anon/pen/pQKVgp)ので、回答します。
|
|
1
|
+
[再現した](https://codepen.io/anon/pen/pQKVgp)ので、回答します。
|
|
2
2
|
|
|
3
3
|
> 非標準な解決策に見えるので、可能であれば標準的な解決策が知りたいです。
|
|
4
4
|
|
2
修正、追記
answer
CHANGED
|
@@ -48,5 +48,6 @@
|
|
|
48
48
|
```
|
|
49
49
|
|
|
50
50
|
そんなわけで、 長いテキストがはみ出してしまったのではないかと思います。
|
|
51
|
+
`word-break`プロパティでのみ改行が正常に行えたのは、横幅が要素の内容によって変化する場合の折り返しにも`word-break`プロパティが対応していたからだと思います。`overflow-wrap`プロパティは、横幅を決めなければ折り返しを行いません。
|
|
51
52
|
|
|
52
53
|
ここまで来れば、`max-width`, `width`プロパティなどを使い横幅を強制することで、今回の問題が解決するとわかります([動作確認用リンク](https://codepen.io/anon/pen/LXrXaM))。
|
1
修正
answer
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> 非標準な解決策に見えるので、可能であれば標準的な解決策が知りたいです。
|
|
4
4
|
|
|
5
|
-
ここでの標準が「非標準
|
|
5
|
+
ここでの標準が「非標準のプロパティを使わないこと」であれば、以下の手順のように`min-width`プロパティ、`max-width`プロパティを使うと、非標準のプロパティに頼らず折り返しができると思います。行った変更では、子要素の幅を固定したりしていないので、おそらく要素が柔軟に伸び縮みしてくれます。
|
|
6
6
|
0. `.iMCKzi`から`word-break`プロパティを外す。
|
|
7
7
|
0. `.bwOsYo`に`min-width: 0`を設定する。
|
|
8
8
|
0. `.gspcJG`に`max-width: 100%`を設定する。
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
> これは何故でしょうか？
|
|
12
12
|
|
|
13
13
|
以下の HTML, CSS を基に考えます。
|
|
14
|
+
|
|
14
15
|
まず、`align-items`プロパティの初期値は`stretch`です。
|
|
15
16
|
そのため、 flex アイテム は、 flex コンテナの横幅いっぱいに広がります([動作確認用リンク](https://codepen.io/anon/pen/XyYyyZ))。
|
|
16
17
|
```pug
|
|
@@ -30,8 +31,8 @@
|
|
|
30
31
|
}
|
|
31
32
|
```
|
|
32
33
|
|
|
33
|
-
ここで、下記コードのように、`align-items`プロパティに`flex-start`を指定したとしましょう。
|
|
34
|
+
ここで、下記コードのように、`.box1`の`align-items`プロパティに`flex-start`を指定したとしましょう。
|
|
34
|
-
すると、 flex アイテム は flex コンテナの横幅いっぱいに広がらず、
|
|
35
|
+
すると、 flex アイテム は flex コンテナの横幅いっぱいに広がらず、始点側の端に寄るだけになります。つまり、 flex コンテナより flex アイテムの横幅の方が大きい場合、 flex アイテムは flex コンテナからはみ出します([動作確認用リンク](https://codepen.io/anon/pen/aQKQQK))。
|
|
35
36
|
|
|
36
37
|
```scss
|
|
37
38
|
.box1 {
|
|
@@ -47,4 +48,5 @@
|
|
|
47
48
|
```
|
|
48
49
|
|
|
49
50
|
そんなわけで、 長いテキストがはみ出してしまったのではないかと思います。
|
|
51
|
+
|
|
50
|
-
ここまで来れば、`max-width`, `width`プロパティなどを使い横幅を強制す
|
|
52
|
+
ここまで来れば、`max-width`, `width`プロパティなどを使い横幅を強制することで、今回の問題が解決するとわかります([動作確認用リンク](https://codepen.io/anon/pen/LXrXaM))。
|