Flex布局调整：使右侧列宽度匹配最大按钮宽度

布局说明 #

我有一个简单的双列布局：

• 左侧为文本内容
• 右侧包含一个或多个链接按钮

当前代码 #

CSS #

.container {
  padding: 20px;
  border: 2px solid black;
  display: flex;
  gap: 15px;
  border-radius: 10px;
}

.left-column {
  border: 1px solid lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-column {
  border: 1px solid tomato;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button-link {
  border: 2px solid black;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  white-space: nowrap;
}

HTML #

<div class="container">
  <div class="left-column">
    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.
  </div>
  <div class="right-column">
    <a class="button-link">A link button</a>
    <a class="button-link">Another link button</a>
  </div>
</div>

需求 #

让右侧列的宽度不超过其中最大按钮（本例中为Another link button）的宽度，左侧文本占据剩余全部空间，且按钮内的文本不换行。

效果对比 #

当前效果	期望效果

修改方案 #

调整CSS代码如下，核心是控制左右列的flex属性和宽度：

.container {
  padding: 20px;
  border: 2px solid black;
  display: flex;
  gap: 15px;
  border-radius: 10px;
}

.left-column {
  border: 1px solid lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1; /* 占据容器剩余全部空间 */
  min-width: 0; /* 确保文本能正常换行，避免溢出 */
}

.right-column {
  border: 1px solid tomato;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch; /* 让按钮宽度与列一致 */
  width: fit-content; /* 列宽度由内部最宽的按钮决定 */
  gap: 10px; /* 按钮间添加间距，优化视觉 */
}

.button-link {
  border: 2px solid black;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  white-space: nowrap; /* 保持按钮文本不换行 */
}

修改要点 #

1. 左侧列：添加flex-grow:1使其占满剩余空间，min-width:0解决flex容器下文本无法换行的问题。
2. 右侧列：移除flex-grow:1，设置width: fit-content让宽度由最宽的按钮决定；align-items: stretch确保所有按钮宽度与列一致，布局更整齐。
3. 按钮间距：给右侧列添加gap，提升按钮间的视觉舒适度。

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