flexのcolumnについて

前提・実現したいこと

リストが多いなら次のコラムに項目を改行させたいす。
親の幅は縮小/拡大させたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<div class="card">
  <ul>
    <li>
      ててててすと
    </li>   <li>
      ててててすと
    </li>   <li>
      ててててすと
    </li>   <li>
      ててててすと
    </li>   <li>
      ててててすと
    </li>   <li>
      ててててすと
    </li>   <li>
      ててててすと
    </li>   <li>
      ててててすと
    </li>   <li>
      ててててすと
    </li>   <li>
      ててててすと
    </li>   <li>
      ててててすと
    </li>
  </ul>
</div>

.card{
  height: 150px; border: 1px red solid;
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

的外れかもしれませんが、flex コンテナに対してheightプロパティを適用することで質問者さんの実現したいことが行えるかもしれません。

CSS
1.card {
2    height: 150px;
3    border: 1px solid;
4}
5
6ul {
7    display: flex;
8    flex-direction: column;
9    height: 100%;
10    margin: 0;
11    flex-wrap: wrap;
12}