回答編集履歴

2

コメントを受けての追記

2019/03/02 11:13

投稿

karamarimo
karamarimo

スコア2551

test CHANGED
@@ -13,3 +13,165 @@
13
13
  ### 追記
14
14
 
15
15
  `.box > div:nth-of-type(2)`については親要素`.box`に合わせて伸び縮みしてほしいので`flex: 1 1 auto`になっています。
16
+
17
+
18
+
19
+ ### 追記2
20
+
21
+ IE11で表示が崩れる原因はよく分かりませんでしたが、`.box > div:nth-of-type(1)`の`flex-shrink`を0にすると直りました。(`flex`の2つ目の値に対応しています)
22
+
23
+
24
+
25
+ IEはFlexboxに関するバグがいろいろあるため正常な動作は期待しないほうがいいかもしれません。
26
+
27
+ [Flexbugs - GitHub](https://github.com/philipwalton/flexbugs)
28
+
29
+
30
+
31
+ 最終的なCSS
32
+
33
+ ```css
34
+
35
+ * {
36
+
37
+ box-sizing: border-box;
38
+
39
+ }
40
+
41
+ .container {
42
+
43
+ padding: 50px;
44
+
45
+ }
46
+
47
+ .wrapper {
48
+
49
+ width: 800px;
50
+
51
+ border: 1px solid #65aaff;
52
+
53
+ margin: 20px auto 0;
54
+
55
+ }
56
+
57
+ .box {
58
+
59
+ display:-webkit-box;
60
+
61
+ display:-ms-flexbox;
62
+
63
+ display: flex;
64
+
65
+ }
66
+
67
+ .box:not(:last-of-type) {
68
+
69
+ border-bottom: 1px solid #65aaff;
70
+
71
+ }
72
+
73
+ .ttl {
74
+
75
+ margin: 0;
76
+
77
+ background: #daffff;
78
+
79
+ padding: 10px;
80
+
81
+ width: 100px;
82
+
83
+ flex: 0 0 auto;
84
+
85
+ display:-webkit-box;
86
+
87
+ display:-ms-flexbox;
88
+
89
+ display: flex;
90
+
91
+ -webkit-box-pack: center;
92
+
93
+ -ms-flex-pack: center;
94
+
95
+ justify-content: center;
96
+
97
+ -webkit-box-align: center;
98
+
99
+ -ms-flex-align: center;
100
+
101
+ align-items: center;
102
+
103
+ border-right: 1px solid #65aaff;
104
+
105
+ }
106
+
107
+ .txt {
108
+
109
+ margin: 0;
110
+
111
+ background: #a0d3ff;
112
+
113
+ padding: 10px;
114
+
115
+ display:-webkit-box;
116
+
117
+ display:-ms-flexbox;
118
+
119
+ display: flex;
120
+
121
+ -webkit-box-align: center;
122
+
123
+ -ms-flex-align: center;
124
+
125
+ align-items: center;
126
+
127
+ -webkit-box-flex: 1 1 auto;
128
+
129
+ -ms-flex: 1 1 auto;
130
+
131
+ flex: 1 1 auto;
132
+
133
+ }
134
+
135
+ .box > div {
136
+
137
+ display:-webkit-box;
138
+
139
+ display:-ms-flexbox;
140
+
141
+ display: flex;
142
+
143
+ }
144
+
145
+ .box > div:nth-of-type(1){
146
+
147
+ -webkit-box-flex: 0 0 auto; /* added */
148
+
149
+ -ms-flex: 0 0 auto; /* added */
150
+
151
+ flex: 0 0 auto; /* added */
152
+
153
+ }
154
+
155
+ .box > div:nth-of-type(1) .txt {
156
+
157
+ width: 200px;
158
+
159
+ background: #ffd5ff;
160
+
161
+ border-right: 1px solid #65aaff;
162
+
163
+ }
164
+
165
+ .box > div:nth-of-type(2) {
166
+
167
+ -webkit-box-flex: 1 1 auto;
168
+
169
+ -ms-flex: 1 1 auto;
170
+
171
+ flex: 1 1 auto;
172
+
173
+ }
174
+
175
+
176
+
177
+ ```

1

追記

2019/03/02 11:13

投稿

karamarimo
karamarimo

スコア2551

test CHANGED
@@ -7,3 +7,9 @@
7
7
 
8
8
 
9
9
  [flex - MDN](https://developer.mozilla.org/ja/docs/Web/CSS/flex)
10
+
11
+
12
+
13
+ ### 追記
14
+
15
+ `.box > div:nth-of-type(2)`については親要素`.box`に合わせて伸び縮みしてほしいので`flex: 1 1 auto`になっています。