Flexbox：如何在不占用剩余空间的情况下使元素可滚动

Question

我有 2 个 div，黄色和红色。黄色的 div 具有可变内容。

我想实现以下目标：

• 当黄色 div 变大时，应该将红色 div 向下推，但绝不能低于页面边缘。红色的 div 应该始终完全可见。
• 如果黄色的 div 变得太大，它应该是可滚动的，所以红色的 div 仍然可见。
• 黄色的 div 不应占用比其内容更多的空间。当黄色的div占用空间不大的时候，红色的div不应该往下推。它应该显示在黄色 div 的正下方。

我怎样才能用 flexbox 实现这个目标？

我成功地使黄色​​框可滚动，并使红色框始终可见。但是，我的解决方案始终在页面底部显示黄色框，这不是我想要的。

.page {
  height: 120px;
  width: 300px;
  display: flex;
  flex-direction: column;
  border: 4px solid gray;
  padding: 10px;
}

.yellow {
  flex: 1 1 0;
  overflow: auto;
  min-height: 0;
  border: 4px solid #F7B64C;
  padding: 10px;
  margin-bottom: 10px;
}

.red {
  border: 4px solid #F05467;
  padding: 10px;
}

Example 1: yellow div has a lot of content and correctly becomes scrollable:
<div class="page">
  <div class="yellow">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="red"></div>
</div>
<br/>
<br/> Example 2: yellow div has little content, incorrectly pushes red div to the bottom:
<div class="page">
  <div class="yellow">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="red"></div>
</div>

我怎样才能让黄色框只占用它实际需要的空间，而不占用剩余的空间？

Answer 1

此解决方案在 red 之后使用间隔符 div，希望能达到预期的效果。

.spacer {flex: 1}

<div class="spacer"></div>

单击按钮可查看以下示例中的 2 个案例。

例子：

const btns = document.querySelectorAll("button");
const yellow = document.querySelector(".yellow");

btns.forEach((btn, i) =>
  btn.addEventListener("click", () =>
    yellow.innerText = i === 0 ? "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." : "Lorem ipsum dolor sit amet."
  )
)

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

body {
  display: flex;
}

.control {
  display: flex;  
  flex-direction: column;
  align-items: flex-start;
  width: 300px;
  margin: 10px 10px;
  gap: 10px;
}

button {
  padding: 6px;
}

section {
  height: 180px;
  width: 300px;
  display: flex;
  flex-direction: column;
  border: 4px solid gray;
  padding: 10px;
  margin: 3px 10px;
}

.yellow {
  overflow: auto;
  min-height: 0;
  border: 4px solid #F7B64C;
  padding: 10px;
  margin-bottom: 10px;
}

.red {
  border: 4px solid #F05467;
  padding: 10px;
}

.spacer {
  flex: 1;
}

<div class="control">
  <button>Example 1: Lots of content in yellow </button>
  <button>Example 2: Little content in yellow </button>
</div>
<br/>
<section>
  <div class="yellow">
  Try click buttons to see examples
  </div>
  <div class="red">
  </div>
    <div class="spacer">
    </div>
</section>