求助：CSS实现自适应最长文本宽度的响应式水平按钮

可以通过 Flexbox 结合灵活的尺寸设置满足所有需求，以下是完整实现代码：

<div class="button-container">
     <div class="horizontal-button" data-role="yes">Yes</div>
     <div class="horizontal-button" data-role="no">No, sorry - I cannot make it</div>
</div>

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* 按钮间间距，可自定义 */
  padding: 0 16px; /* 避免按钮贴页面边缘，适配移动端 */
}

.horizontal-button {
  flex: 1 1 min-content; /* 核心规则：基于文本最小宽度分配空间，支持扩展/收缩 */
  max-width: 100%; /* 限制按钮宽度不超出容器 */
  padding: 10px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f5f5f5;
  text-align: center;
  overflow-wrap: break-word; /* 超长文本自动换行 */
  word-break: break-word;
}

关键属性说明 #

• .button-container 的 flex-wrap: wrap：水平空间不足时，按钮自动纵向堆叠。
• .horizontal-button 的 flex: 1 1 min-content：
  • flex-grow: 1：让两个按钮平分可用空间，确保宽度一致；
  • flex-shrink: 1：允许按钮在空间紧张时收缩；
  • flex-basis: min-content：以按钮内文本的最小宽度为基准，保证宽度由最长文本决定。
• max-width: 100%：防止按钮宽度超出页面/容器宽度，适配移动端窄屏。
• overflow-wrap + word-break：确保超长文本自动换行，避免撑破按钮布局。

效果对应需求 #

1. 无论文本长度如何，两个按钮始终保持同宽，由最长文本的最小宽度决定；
2. 按钮最大宽度不超过容器宽度，适配移动端；
3. 水平空间充足时并排显示，不足时自动堆叠；
4. 文本过长时自动换行，保持按钮布局稳定。

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