Div 不会折叠得小于内容

Question

我正在创建一个页面，我希望祖父母占据页面的整个垂直高度 Sibiling 和 Bottom-Child 具有固定高度，并且父级和顶部子级在垂直方向上占据尽可能多的空间，而不会导致滚动条，顶部子级内除外。

代码笔链接：https://codepen.io/dante-e/pen/MWxrMxe

如果 top-child 为空，它会按我想要的方式工作，但是如果它填充了很多内容，当我使页面垂直变小时，它不会缩小 top-child 或向其添加滚动条，而是添加滚动条给祖父母

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grand-parent {
  display: flex;
  flex-direction: column;
  /* Set the grand-parent container to a column layout */
  height: 100vh;
  /* Ensure the grand-parent container takes the full height of the viewport */
}

.parent {
  display: flex;
  flex-direction: column;
  /* Set the parent container to a column layout */
  flex: 1;
  /* Take as much space as possible within the grand-parent */
}

.top-child {
  flex: 1;
  /* Take as much space as possible within the parent */
  border: 1px solid #000;
  padding: 10px;
  overflow: auto;
}

.bottom-child {
  min-height: 101px;
  /* Set a minimum height for the bottom child */
  border: 1px solid #000;
  padding: 10px;
}

.sibling {
  min-height: 50px;
  /* Adjust the height as needed */
  border: 1px solid #000;
  padding: 10px;
}

<div class="grand-parent">
  <div class="sibling">Sibling of Parent</div>
  <div class="parent">
    <div class="top-child">***lots of content***</div>
    <div class="bottom-child">Bottom Child</div>
  </div>
</div>

Answer 1

您可以将

overflow: hidden

或

min-height: 0

添加到

.parent

元素，这样子元素就不会占用至少

min-content

的垂直空间来正确显示滚动条：

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grand-parent {
  display: flex;
  flex-direction: column;
  /* Set the grand-parent container to a column layout */
  height: 100vh;
  /* Ensure the grand-parent container takes the full height of the viewport */
}

.parent {
  display: flex;
  flex-direction: column;
  /* Set the parent container to a column layout */
  flex: 1;
  /* Take as much space as possible within the grand-parent */

  /* added */
  overflow: hidden;
}

.top-child {
  flex: 1;
  /* Take as much space as possible within the parent */
  border: 1px solid #000;
  padding: 10px;
  overflow: auto;
}

.bottom-child {
  min-height: 101px;
  /* Set a minimum height for the bottom child */
  border: 1px solid #000;
  padding: 10px;
}

.sibling {
  min-height: 50px;
  /* Adjust the height as needed */
  border: 1px solid #000;
  padding: 10px;
}

<div class="grand-parent">
  <div class="sibling">Sibling of Parent</div>
  <div class="parent">
    <div class="top-child">
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 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 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 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 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 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 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 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.</div>
    <div class="bottom-child">Bottom Child</div>
  </div>
</div>