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

Question

我有一个包含多个子 div 的父元素。一，“内容”区域，将始终可见并包含可滚动的 Material 部分。我的问题是我无法根据包含的其他 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。

Answer 1

将此样式添加到 mytest:

display: table;

将两个 div 添加到 mytest，具有这些类:

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

.row2 {
  display: table-row;
}

row2 将包含您想要适合的内容 (rollit)。 row1 将包含其余内容。

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

rollit 上的overflow 样式防止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>