如何根据子元素高度设置HTML父div高度并实现自适应滚动

问题场景：

• 父div设height: 100%时，屏幕高度不足时可滚动，但子元素下方会出现大片红色背景（父元素背景）
• 父元素设height: calc(5 * 1.2rem + 5 * 0.8em)时，仍有少量红色，且小屏状态下无法滚动
• 需求：小屏幕时父div可滚动，大屏幕时父元素高度刚好包裹子元素，无多余红色背景

修改后的CSS代码：

.css_styles_1
{
  position: fixed;
  top: 0;
  left: 0;
  width: 50vw;
  overflow-x: hidden; 
  overflow-y: auto; /* 开启垂直滚动 */
  background-color: red; 
  line-height: 1rem; 
  height: fit-content; /* 大屏时高度自适应子元素 */
  max-height: 100vh; /* 小屏时最大高度为视口高度 */
}
.css_styles_2
{
  font-size: 1.2rem; 
  padding-top: 0.4em; 
  padding-bottom: 0.4em;             
}
.css_styles_2_odd
{
  background-color: aquamarine;
}
.css_styles_2_even
{
  background-color: chocolate;
}

代码说明：

• height: fit-content：让父元素高度自动适配所有子元素的总高度，大屏幕下不会出现多余的红色背景
• max-height: 100vh：限制父元素最大高度为当前视口高度，当屏幕高度不足以容纳所有子元素时，触发滚动
• overflow-y: auto：仅在内容超出父元素高度时显示垂直滚动条，保证小屏状态下的滚动能力

HTML代码保持不变：

<div class="css_styles_1">
  <div class="css_styles_2 css_styles_2_odd">Text 1</div>
  <div class="css_styles_2 css_styles_2_even">Text 2</div>
  <div class="css_styles_2 css_styles_2_odd">Text 3</div>
  <div class="css_styles_2 css_styles_2_even">Text 4</div>
  <div class="css_styles_2 css_styles_2_odd">Text 5</div>
</div>

内容的提问来源于stack exchange，提问作者Léa Massiot