如何实现.div1与.div2间button-container自适应高度及按钮居中？

要实现需求里的布局，核心用Flexbox控制父容器的垂直布局，让按钮容器自动填充div1和div2之间的剩余空间，同时保证按钮在容器内始终居中。以下是完整代码调整：

完整代码 #

HTML #

<div class="wrapper">
  <div class="div1">Dynamic Height<br>可以多行文本，高度会自动变化</div>
  <div class="button-container">
    <button class="item">Button 1</button>
    <button class="item">Button 2</button>
    <!-- 可随意增减按钮数量 -->
    <button class="item">Button 3</button>
    <button class="item">Button 4</button>
  </div>
  <div class="div2">Fixed Height</div>
</div>

CSS #

/* 父容器：控制整体垂直布局 */
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 可按需调整高度，比如设为具体数值600px */
  padding: 83px 48px 24px; /* 替代子元素margin，避免宽度溢出 */
  box-sizing: border-box;
}

.div1 {
  background-color: cadetblue;
  text-align: center;
}

.button-container {
  flex: 1; /* 关键：自动填充div1和div2之间的剩余空间 */
  display: flex;
  flex-wrap: wrap; /* 按钮数量过多时自动换行 */
  align-items: center; /* 垂直方向居中 */
  justify-content: center; /* 水平方向居中 */
  gap: 20px; /* 按钮间间距，替代原margin-top */
  padding: 20px 0; /* 可选：避免按钮贴容器边缘 */
}

.div2 {
  height: 105px;
}

button.item {
  text-transform: none;
  width: 200px;
  height: 50px;
}

关键要点说明 #

• 父容器Flex布局：设置display: flex; flex-direction: column让子元素垂直排列，height: 100vh让容器占满视口高度，用padding替代子元素的margin，避免宽度计算溢出。
• 按钮容器自动填充空间：给.button-container加flex: 1，无论div1高度怎么变，都会自动占据中间剩余空间。
• 按钮居中适配任意数量：按钮容器嵌套Flex布局，flex-wrap: wrap支持按钮换行，align-items和justify-content保证按钮组始终在容器内水平垂直居中，用gap统一控制按钮间距更整洁。
• 固定底部的div2：借助父容器Flex布局，div2设固定高度后自动排在底部，无需绝对定位，避免脱离文档流的问题。

内容的提问来源于stack exchange，提问作者user21955191