質問編集履歴
1
タイトルを内容に沿ったものに変更しました。また解決方法の1つを追記しました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
フレキシブルボックスを使ってボックスの高さをそろえたい
|
|
1
|
+
フレキシブルボックスを使って横並びにした3つのボックスの高さをそろえ、内容物の高さも同じにしたい
|
body
CHANGED
|
@@ -152,4 +152,46 @@
|
|
|
152
152
|
|
|
153
153
|
となってしまいました。
|
|
154
154
|
|
|
155
|
-
よろしくお願いします。
|
|
155
|
+
よろしくお願いします。
|
|
156
|
+
|
|
157
|
+
--- 追記 ---
|
|
158
|
+
|
|
159
|
+
投稿のあと、.contactに高さを明示し、.addressにoverflow:hiddenを使えば
|
|
160
|
+
思っていたものに近いものができそうでした。
|
|
161
|
+
|
|
162
|
+
具体的には
|
|
163
|
+
|
|
164
|
+
```ここに言語を入力
|
|
165
|
+
CSS
|
|
166
|
+
.contents {
|
|
167
|
+
display: flex;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.box {
|
|
171
|
+
width: 200px;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.contact {
|
|
175
|
+
display: flex;
|
|
176
|
+
flex-direction: column;
|
|
177
|
+
height: 200px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.address {
|
|
181
|
+
overflow: hidden;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.btn {
|
|
185
|
+
margin-top: auto;
|
|
186
|
+
}
|
|
187
|
+
```
|
|
188
|
+
とする方法です。
|
|
189
|
+
|
|
190
|
+
しかしこの方法は、わざわざ高さを明示しなければならない点が不満です。
|
|
191
|
+
また高さを明示したため、結局コンテンツ量が多くなると高さがそろわないという欠点があります。
|
|
192
|
+
|
|
193
|
+
そこで.addressにoverflow: hiddenをつけました。
|
|
194
|
+
ですがこの方法だとコンテンツが途切れるというのが不細工です。
|
|
195
|
+
|
|
196
|
+
希望していた形はコンテンツ量の増加にしたがって
|
|
197
|
+
３つのボックス（のaddress部分）も同時に広がる、というものでした。
|