flex布局下white-space: nowrap宽度异常及同宽div适配问题

要实现两个尺寸一致、文本不换行且尽可能紧凑的按钮，可通过以下调整解决宽度计算问题：

问题根源 #

原代码中父元素设置width: fit-content会限制容器宽度仅包裹最长子元素内容，再配合子元素的flex: 1会导致两个按钮平分有限宽度，短文本按钮被不必要拉伸、长文本按钮易出现布局异常；同时width: fit-content与flex: 1的组合会冲突，干扰正常宽度计算。

修正后的代码 #

/* 父容器：移除width限制，让宽度由子元素自然撑开 */
.button-container {
  display: flex;
}

.button {
  padding: 10px 20px;
  flex: 1; /* 让两个按钮自动填充父容器宽度（父容器宽度由最长按钮决定） */
  white-space: nowrap; /* 强制文本单行显示 */
  min-width: fit-content; /* 确保按钮宽度不会窄于自身文本内容 */
}

.button1 {
  background: red;
}

.button2 {
  background: green;
}

<div class="button-container">
  <div class="button button1">Short Text</div>
  <div class="button button2">A Long Text Button That Has Greater Width</div>
</div>

关键调整说明 #

• 移除父元素的width: fit-content，让父容器宽度自动适配最长子元素的宽度
• 保留flex: 1，使两个按钮同步扩展到父容器宽度（即与最长按钮同宽）
• white-space: nowrap确保文本始终保持单行不换行
• min-width: fit-content避免按钮被压缩到比自身文本更窄的尺寸

调整后两个按钮会始终保持相同宽度，宽度由最长的文本内容决定，同时文本不会换行，整体布局尽可能紧凑。

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