当标签变得太大时，如何使按钮自动弹出到下一行？

Question

我有两个按钮。如果有 space，两个按钮都应该占用 space 的 1fr。因此，它们将彼此相邻放置。然而，如果按钮变得太大，它应该占据完整的 space 并将另一个按钮放在它下面，也扩展到完整的 space （因为没有其他按钮竞争 space） .

我现在明确表示最小 100px，但这当然行不通，我尝试了 min-content、max-content，我尝试了所有方法，但似乎无法正常工作。

.grid 
{
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
  
  width: 300px;
  margin: 0 auto;
}

.button
{
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
  color: #fff;
  background: #000;
  width: 100%;
  box-sizing: border-box;
}

.grid-two
{
  margin-top: 30px;
}

.grid-two .button
{
  background: red;
}

.grid-three
{
  margin-top: 30px;
  grid-template-columns: repeat( auto-fit, minmax( 0px, max-content ) );
}

.grid-three .button
{
  background: green;
}

<div class="grid grid-one">
  <div class="button">Button A</div>
  <div class="button">Button B</div>
</div>

<div class="grid grid-two">
  <div class="button">Button With Large Title</div>
  <div class="button">Button B</div>
</div>

<div class="grid grid-three">
  <div class="button">Button With Large Title</div>
  <div class="button">Button B</div>
</div>

Answer 1

Flexbox 可以做到这一点：

.grid {
  display: flex;
  flex-wrap:wrap;
  gap: 5px;
  width: 300px;
  margin: 0 auto;
}

.button {
  /* this will do the trick */
  flex-basis:calc(50% - 5px); /* we consider the gap */
  white-space:nowrap;
  flex-grow:1;
  /**/
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: #000;
  box-sizing: border-box;
}

.grid-two .button {
  background: red;
}

.grid-three .button {
  background: green;
}

<div class="grid grid-one">
  <div class="button">Button A</div>
  <div class="button">Button B</div>
</div>

<div class="grid grid-two">
  <div class="button">Button With Large Title</div>
  <div class="button">Button B</div>
</div>

<div class="grid grid-three">
  <div class="button">Button With Large Title</div>
  <div class="button">Button B</div>
</div>

当标签变得太大时，如何使按钮自动弹出到下一行？

How can you make the button automatically pop to the next row when label becomes too large?

css

flexbox

css-grid