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