javascript - 添加新元素时调整子元素的大小

我有一个具有多个子div的父元素。其中一个“内容”区域将始终可见，并包含可滚动的材料区域。我的问题是我无法根据包含的其他div元素来正确调整大小。我显然可以手动调整大小，但是我的问题是我可以将一些动态元素添加到父元素中，从而将“内容”部分压低。

有没有办法用CSS调整内容区域的大小？还是我必须使用JS实现？这是发生的情况的基本示例（没有动态元素）：

JSFiddle here Edit: (updated to include what I want it to look like)

<div id="mytest">
    Test
    <div id="topper">
           Other Test
    </div>
    <div id="rollit">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

编辑：
我的问题是我不希望“ rollit”扩展父级div，而是希望“ rollit”重新调整自身以适合自己。这部分是关键，因为代码中的“ topper”部分实际上是动态添加的。简而言之，无论“ mytest” div的大小如何，都应保持相同，无论稍后再添加topper div，“应当”（当前不）应缩小“ rollit”，以便“ rollit”仍适合父div。

最佳答案

将此样式添加到mytest：

display: table;

使用以下类将两个div添加到mytest：

.row1 {
  display: table-row;
  height: 0px;
}

.row2 {
  display: table-row;
}

row2将包含您要适合的内容（rollit）。 row1将包含其余内容。

因为您要在mytest上设置高度，所以它的行将尝试按比例扩展以适合该高度。 height: 0px导致row1仅占据其内容所需的高度。

overflow上的rollit样式可防止row2超出mytest的范围。

片段：

#mytest {
  display: table;
  height: 150px;
  border: 1px solid #000;
  background: yellow;
}

.row1 {
  display: table-row;
  height: 0px;
}

.row2 {
  display: table-row;
}

#topper {
  height: 30px;
}

#rollit {
  height: 100%;
  width: 200px;
  overflow: auto;
}

<div id="mytest">
  <div class="row1">
    Test
    <div id="topper">
      Other Test
    </div>
  </div>

  <div class="row2">
    <div id="rollit">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div>