<p>我正在尝试创建两个水平按钮，它们的宽度相同 - 基于最长按钮的宽度。</p> <ul> <li>每个按钮的文本内容可以由用户在单独的页面上调整...因此我无法控制他们的文本长度/第一个按钮和第二个按钮的文本长度。</li> <li>我希望按钮能够根据最长文本的长度进行调整，但不要超出页面的宽度（例如在移动设备上）。</li> <li>我希望按钮默认水平显示，但如果它们不能水平显示，则堆叠为列。</li> <li>如果整个文本无法适应，我需要按钮的文本换行。</li> </ul> <pre class="brush:php;toolbar:false;">&lt;div class=&quot;button-container&quot;&gt; &lt;div class=&quot;horizontal-button&quot; data-role=&quot;yes&quot;&gt;是&lt;/div&gt; &lt;div class=&quot;horizontal-button&quot; data-role=&quot;no&quot;&gt;不，抱歉 - 我不能做到&lt;/div&gt; &lt;/div&gt;</pre> <p>我尝试了多种选项...但无法使其正常工作！</p> <ul> <li>当使用网格布局grid-template-colums: 1fr 1fr时，我找不到一种方法来在需要时将按钮堆叠为列。</li> <li>当使用flex和flex:1 1 0时，我找不到一种方法来使按钮的宽度适应文本的长度。</li> </ul> <p>请帮忙！</p> <p>非常感谢！ 达米安。</p>

div {
  background-color: rgba(0, 0, 0, 0.1);
}

.button-container {
  padding: 16px;
  display: flex;
  gap: 16px;
}

.horizontal-button {
  padding: 16px;
  flex: 1;
  text-align: center;
  word-wrap: hypens;
}

@media (max-width: 360px) {
  .button-container {
    flex-direction: column;
  }
}

<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>

div {
  background-color: rgba(0, 0, 0, 0.1);
}

.button-container {
  margin: auto;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: 16px;
  max-width: max-content;
}

.horizontal-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  flex: 1;
  text-align: center;
  max-width: 50%;
}

@media (max-width: 360px) {
  .button-container {
    flex-direction: column;
  }
  .horizontal-button {
    hyphens: auto;
    max-width: unset;
  }
}

<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>