如果父元素div的高度被设置为100%（目前就是这种情况），并且如果我降低屏幕高度，例如，最后两个子元素不能被看到，那么div是可滚动的。
现在，我不想在子元素后面有那么大的红色区域。
因此，我试图找到子元素的确切高度，以便可以相应地设置父元素的height属性。
如果我将这个高度设置为calc(5 * 1.2rem + 5 * 0.8em)，不仅我最终会得到一个薄的读取区域，我希望不会看到我的计算是否足够，而且div在小高度屏幕尺寸下不能滚动。
我想div是在小高度屏幕尺寸滚动。
当屏幕高度很大时，我不想要那个红色区域。

.css_styles_1
{
  position: fixed;
  top: 0;
  left: 0;
  width: 50vw;
  overflow-x: hidden; 
  background-color: red; 
  line-height: 1rem; 
  /*height: calc(5 * 1.2rem + 5 * 0.8em);*/
  height: 100%;
}
.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;
}

<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>