親要素内にあるリストの項目数に応じて高さが変動する子要素を実現するためのcssを教えてください。

実現したいこと

リストの項目数に応じて子要素の高さが変動するUIを実現したいです。

条件として親要素の高さは固定で、リストがない場合は子要素の高さが親要素の高さと同じになります。

ご回答していただけると幸いです。よろしくお願いいたします。

現状

下記ソースコードだと以下のような画面になります。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Document</title>
8    <link rel="stylesheet" type="text/css" href="index.css" />
9  </head>
10  <body>
11    <div class="outerBox">
12      <div class="list">
13        <div class="listItem">
14          <p>Item</p>
15        </div>
16        <div class="listItem">
17          <p>Item</p>
18        </div>
19      </div>
20      <div class="innerBox">
21        <p>子要素</p>
22      </div>
23    </div>
24  </body>
25</html>

css
1.outerBox {
2  height: 400px;
3  width: 100%;
4  display: flex;
5  padding: 40px;
6  flex-direction: column;
7  background-color: #b3fff2;
8}
9
10.innerBox {
11  height: auto;
12  min-width: 40px;
13  width: 100%;
14  position: relative;
15  background-color: #fff2cc;
16}
17
18.list {
19  background-color: #ece9f4;
20  margin-bottom: 20px;
21}
22
23.listItem {
24  background-color: #d5cde6;
25  margin: 0px 20px;
26}
27
28body {
29  padding: 200px;
30}
31

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

回答3件

ベストアンサー

.innerBox を flex-grow で伸ばせばいいと思います。

CSS
1.innerBox {
2  flex-grow: 1;
3/*
4  height: auto;
5  min-width: 40px;
6  width: 100%;
7  position: relative;
8*/
9  background-color: #fff2cc;
10}