display: flex を用いた横並び要素の高さを揃えたい（複数の要素）

html
1<div>
2    <dl>
3        <dt>テスト文章<br>テスト文章</dt>
4        <dd>テスト文章<br>テスト文章</dd>
5    </dl>
6    <dl>
7        <dt>テスト文章</dt>
8        <dd>テスト文章<br>テスト文章</dd>
9    </dl>
10    <dl>
11        <dt>テスト文章</dt>
12        <dd>テスト文章テスト文章</dd>
13    </dl>
14</div>

css
1div {
2    display: flex;
3    max-width: 680px;
4    width: 100%;
5}
6dl {
7    display: flex;
8    flex-direction: column;
9    width: 33%;
10}
11dt,dd {
12    display: flex;
13    width: 100%;
14    border: 1px solid #CCCCCC;
15}
16dd {
17    flex-grow: 1;
18}

状況

display:flexを用いて横並びにした３つの要素があります（dl）
その横並びの要素の中に２つの要素があり、それは縦に並んでいます。（上がdt、下がdd）

それらすべてを囲むdivがあります。

質問

横並びにしたdl要素内のdt,dd両方についてフレキシブルに高さを揃えたいです。
現在のコードだとddについてはいずれか一つの高さが増えると、残りもそれにあわせて高さが合うようになっているんですが
dtに関してはそのようになりません。
flex-grow: 1;がdt、ddどちらか一方にしか設定できないようです。

dt、dd両方とも高さが揃うようにすることはできますか？

Lhankor_Mhy

2021/12/16 02:20

難しいと思います。グリッドレイアウトならば可能ですが、垂直方向の順番に並べるのはいろいろと面倒です。

行動規範の内容に同意します

回答2件

ベストアンサー

グリッドレイアウトを用いるなら、こんな感じです。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/by2e1Lzu/

css
1div {
2  display: grid;
3  grid:auto auto / 33% 33% 33%;
4  max-width: 680px;
5  width: 100%;
6}
7dl {
8  display: contents;
9}
10dt,dd {
11  display: flex;
12  width: 100%;
13  border: 1px solid #CCCCCC;
14}
15dd {
16  grid-row: 2;
17}