<p>我找不到任何解决方案来让 2 个相同大小的 div 将文本容纳在一行中。看起来像空白：在我设置父宽度：fit-content后，现在不考虑宽度。</p> <p>它们应该尽可能小，大小始终相同，不要将文本换行到第二行。</p> <p> <pre class="brush:css;toolbar:false;">div { display: flex; width: fit-content; } .button { padding: 10px 20px; flex: 1; white-space: nowrap; min-width: 130px; width: fit-content; } .button1 { background: red; } .button2 { background: green; }</pre> <pre class="brush:html;toolbar:false;">&lt;div&gt; &lt;div class="button button1"&gt;Short Text&lt;/div&gt; &lt;div class="button button2"&gt;A Long Text Button That Has Greater Width &lt;/div&gt; &lt;/div&gt;</pre> </p>

.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
}

.button {
  padding: 10px 20px;
  white-space: nowrap;
  min-width: 130px;
  overflow: auto;
}

.button1 {
  background: red;
}

.button2 {
  background: green;
}

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