CSS：複数のボックス - 1つの行が長すぎる場合のラッピング

Question

私はいくつかのクラス（例えばbox-cls）で定義された3つの異なるボックスにコンテンツを持っています。スタイルは3つすべて同じです。したがって、私は例を得る：

+---------+---------+---------+ 
| 12 34 | my long | ab de | 
+---------+---------+---------+ 

私はボックスの内容よりもページを縮小するときに減少します。このように縮小し、私はクラスのボックスを参照してください

+-------+-------+-------+ 
| 12 34 | my | ab de | 
|  | long |  | 
+-------+-------+-------+ 

実際の問題：私はこのようにそれを見ると期待しているだろう

+-------+-------+-------+ 
| 12 34 | my | ab de | 
+-------+ long +-------+ 
     +-------+ 

1. 動的ボックスの高さを調整する方法はあります箱の最大高さまで？
2. 1）が不可能な場合：ボックスの長さが一定の制限を下回るとすぐに高さを固定することはできますか？

@mediaで試しましたが、適切なスタイリングには成功しませんでした。 は現在、私は唯一の固定された解決策があります。

.box-content { 
    min-height: 46px!important; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

のが、よりダイナミックな解決策を持っていると思います - 私のアプローチとのcuzの高さが大の場合が多いです！ CSS-ソリューションを探して - いないjQueryの（または類似の）

Answer 1

.boxes{ 
 
    display: flex;     /* 1. */ 
 
} 
 

 
.box { 
 
    flex: 1;      /* 2. */ 
 
    border: 1px solid chocolate; 
 
}

<div class="boxes"> 
 
    <div class="box">12 34</div> 
 
    <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam voluptate, optio magni hic et non voluptatibus ipsum voluptates, quisquam suscipit consectetur ea eveniet ut eos corporis perspiciatis error temporibus aut. 
 
    </div> 
 
    <div class="box">ab de</div> 
 
</div>

Answer 2

あなたがflexを使用したくない場合は、より良いブラウザのサポートを持っているtable/table-cellを使用することができます。

.wrap { 
 
    display: table; 
 
} 
 
.box-content { 
 
    min-height: 46px!important; 
 
    display: table-cell; 
 
    border: 1px solid red; 
 
}

<div class="wrap"> 
 
    <div class="box-content">12 34</div> 
 
    <div class="box-content">my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long </div> 
 
    <div class="box-content">ab de</div> 
 
</div>