内容が可変なコンテンツの高さが揃わない

display:flex;を使用してli要素を横並びにし、
高さを揃えたかった。
しかし、内容が可変であるため、以下のようになってしまう。

コード

HTML

<ul>
  <li>
    バナナ
  </li>
  <li>
    バナナ
  </li>
  <li>
    バナナ
  </li>
  <li>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  </li>
</ul>

CSS

ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  width: 32%;
  padding: 10px;
  margin-right: 2px;
  margin-bottom: 2px;
  border: 1px solid #444;
  box-sizing: border-box;
}

試したこと

flex自体を色々調べたが、どのサイトにも
displayにflexを指定すれば高さが揃うとしか書いていなかった。

ちなみにflex-wrap: wrap;を指定すると
1段目は1段目の中で最大の高さにコンテンツを合わせる、
2段目は2段目の中で最大の高さに合わせる
ような動きになっている?ため1段目も2段目も同じに高さにすることができない。。

決めうちでheight(min-,max-含む)を指定すれば高さは揃うが
もちろんテキストは飛び出る(overflow:hidden,scrollでは対応しない)のでよくない。
javascriptでごにょごにょやればいけそうではあるけどできればcssで解決したい。

cssでこれを再現できる方法があったら教えてください。

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

回答1件

ベストアンサー

flexbox では不可能です。
行ベースの flex コンテナに複数の行がある場合、それぞれの行の高さはその行にフレックスアイテムを含めるために必要な最小の高さになります。代替として、 CSS Grid Layout を用いることで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

HTML
1<ul>
2  <li>
3    バナナ
4  </li>
5  <li>
6    バナナ
7  </li>
8  <li>
9    バナナ
10  </li>
11  <li>
12    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
13  </li>
14</ul>

CSS
1ul {
2  display: grid;
3  margin: 0;
4  padding: 0;
5  list-style-type: none;
6  grid-template-columns: repeat(3, 1fr);
7  grid-auto-rows: 1fr;
8}
9
10li {
11  box-sizing: border-box;
12  margin-right: 2px;
13  margin-bottom: 2px;
14  padding: 10px;
15  border: 1px solid #444;
16}