cssにおける%での要素の高さ指定について

以下の"test"クラスを持つul要素内に
"first"クラスを持つul要素配下に2行のli要素と、
"second"クラスを持つul要素配下にdisplay:flex;にて横並びにした2列のli要素がある場合

"first"クラス内のli要素の行数に応じて高さも変更したいのですが、"first"クラスと"second"クラスのul要素の高さ(height)を同じにするには、以下のコードの場合何処を修正すれば良いのでしょうか？

%での高さ表示の場合、親要素の高さを基準にして割合で指定している様ですが、親要素の高さが固定値で無い場合、どの様に基準を決めれば良いか分からず質問しました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />

<style type="text/css">
body{
width:100%;
}

ul,li{
padding:0;
margin:0;
list-style: none;
}

.test{
width:100%;
display:flex;
background:red;
}

.first{
width:50%;
height:100%;
background:yellow;
}

.second{
width:50%;
height:100%;
display:flex;
background:green;
}

.second-left{
width:30%;
height:100%;
background:white;
}

.second-right{
width:70%;
height:100%;
background:pink;
}

</style>

</head>
<body>
<ul class="test">

<ul class="first">
<li class="first">111</li>
<li class="first">222</li>
</ul>

<ul class="second">
<li class="second-left">333</li>
<li class="second-right">444</li>
</ul>

</ul>


</body>
</html>

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

回答1件

ベストアンサー

secondのheightをautoにしてはどうでしょうか？

css
1.second{
2  width:50%;
3  /*height:100%;*/
4  height:auto;
5  display:flex;
6  background:green;
7}

投稿2020/08/25 07:28

nekoniki

総合スコア2411

tetsu777

2020/08/26 03:30

ご回答ありがとうございます。autoで大丈夫なんですね。無事解決しました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

cssにおける%での要素の高さ指定について

関連した質問