如何设置outerDiv高度，让box始终位于fit-content的div1下方？

要实现你需要的效果，只需要把outerDiv的固定高度改成最小高度，再配合Flex布局就能搞定，具体步骤和代码如下：

核心修改点 #

• 替换outerDiv的height: 400px为min-height: 400px，确保容器高度能自适应内部内容，同时保留最小高度的限制
• 用Flex布局让box1、box2自动固定在outerDiv底部，且始终跟在div1下方

示例代码 #

HTML结构（假设你的结构如下） #

<div id="outerDiv">
  <div id="div1">
    <!-- 这里是自适应高度的内容 -->
  </div>
  <div id="box1">box1</div>
  <div id="box2">box2</div>
</div>

对应的CSS #

#outerDiv {
  min-height: 400px; /* 替换原固定height:400px */
  display: flex;
  flex-direction: column;
  /* 可选：添加样式方便调试，比如边框 */
  border: 1px solid #eee;
  padding: 10px;
}

#div1 {
  height: fit-content;
  /* 可选：给div1加底部间距，避免和底部盒子紧贴 */
  margin-bottom: 15px;
}

#box1, #box2 {
  margin-top: auto; /* 关键：自动把盒子推到容器底部 */
  /* 如果需要box1和box2并排，可以再加display: inline-block; margin-right: 10px; */
}

效果说明 #

• 当div1的内容高度小于400px时，outerDiv保持400px的最小高度，box1、box2固定在容器底部
• 当div1的内容高度超过400px时，outerDiv会自动被撑开，高度等于div1的高度加上box1、box2的高度，此时box1、box2会紧跟在div1下方，不会被内容覆盖

内容的提问来源于stack exchange，提问作者nathan.friedman.designs