如何在flex双列等高布局中固定右侧div按钮于右下角并保留最小边距？

这个问题的核心原因是你使用了绝对定位让按钮脱离了文档流，当右侧内容高度超过容器时，就会和按钮重叠。我们可以利用Flex布局的嵌套特性来完美解决，不需要依赖绝对定位，同时还能保证左右两列始终等高。

解决方案步骤： #

• 调整右侧列的DOM结构，将动态内容和按钮放在一个独立容器中，方便用Flex垂直布局管理
• 修改CSS样式，通过Flex的flex-direction: column和flex: 1属性，让内容区自动填充空间，按钮自然固定在底部

完整代码示例 #

HTML

<div class="content">
  <div class="left">
    <ul>
      <li>These items are dynamic</li>
      <li>meaning there can be a number of N of them</li>
      <li>Add more items to test left column height</li>
    </ul>
  </div>
  <div class="right">
    <div class="right-content">
      THIS IS DYNAMIC CONTENT, THAT CAN CHANGE IN HEIGHT<br>
      Add more lines here to test long content<br>
      Line 3<br>
      Line 4<br>
      Line 5<br>
      Line 6<br>
      Line 7
    </div>
    <div class="action-buttons">
      <button>TEST</button>
    </div>
  </div>
</div>

CSS

.content { 
  display: flex;
  width: 80%;
  margin: 0 auto;
}

.left { 
  width: 25%; 
  background-color: #d3d3d3;
  padding: 10px;
}

.left li { 
  height: 50px; 
  margin-bottom: 8px;
}

.right { 
  width: 75%; 
  background-color: #a9a9a9;
  padding: 10px;
  /* 关键：把右侧变成垂直方向的Flex容器 */
  display: flex;
  flex-direction: column;
}

.right-content {
  /* 关键：让内容区占据右侧容器的所有可用空间 */
  flex: 1;
  /* 保证和按钮的最小间距 */
  margin-bottom: 15px;
}

.action-buttons {
  /* 让按钮靠右对齐 */
  align-self: flex-end;
  /* 让按钮远离容器底部 */
  margin-bottom: 10px;
}

关键原理说明： #

• 外层的.content使用display:flex，确保左右两列始终保持等高，无论哪一侧内容更长
• 右侧的.right设置为flex-direction: column后，内部元素会垂直排列
• .right-content的flex:1属性会让它自动填充.right容器内除了按钮之外的所有空间，从而把按钮推到容器底部
• 通过align-self: flex-end让按钮靠右对齐，再用margin设置内容和按钮、按钮和容器底部的最小间距，完全避免了内容覆盖按钮的问题

这个方案同时兼容两种场景：

• 当左侧内容更长时，右侧列会被拉伸到和左侧等高，按钮依然固定在右下角
• 当右侧内容更长时，内容区会自动扩展，按钮始终在内容下方的右下角，不会被覆盖

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