如何包装内联用div的内容，以使包裹的部分占据了以前的内线式div下方的空白空间？

Question

.container {
  height: 200px;
  width: 200px;
  border: 5px solid black;
  padding: 5px;
}

.button-group {
  display: inline-flex;
  flex-wrap: wrap;
}

.box {
  height: 45px;
  width: 45px;
  border-width: 5px;
  border-style: solid;
}

.red {
  border-color: red;
}

.green {
  border-color: green;
}

.blue {
  border-color: blue;
}

.yellow {
  border-color: yellow;
}

.pink {
  border-color: pink;
}

.brown {
  border-color: brown;
}

<div class="container">
  <div class="button-group">     
    <div class="box red">R</div>
    <div class="box green">G</div>
  </div>

  <div class="button-group">     
    <div class="box blue">Bl</div>
    <div class="box yellow">Y</div>      
  </div>
  
  <div class="button-group">     
    <div class="box pink">P</div>
    <div class="box brown">Br</div>      
  </div>
</div>

实际：

^如果在第一个 box 中只有一个 button组 和两个 box 在第二个按钮组然后所有三个都占据了第一行。但是，一旦您将第三个 box 添加到第二个按钮组时，其所有三个 box 移动到下一行。我希望 box 不再发生这种情况，无论它们属于哪种 button> button> button 。

预期：

总体期望： n container 和 m 内部的内联用divs数>盒子 <代码>按钮组。任何按钮组或任何 box 都可以动态删除。最后，每行上必须有三个 box ，或尽可能多的WRT到可用的宽度。

谢谢。

Answer 1

使用显示：内容并移动显示：flex 到容器

.container {
  height: 200px;
  width: 200px;
  border: 5px solid black;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
}

.button-group {
  display: contents;
}

.box {
  height: 45px;
  width: 45px;
  border-width: 5px;
  border-style: solid;
}

.red {
  border-color: red;
}

.green {
  border-color: green;
}

.blue {
  border-color: blue;
}

.yellow {
  border-color: yellow;
}

.pink {
  border-color: pink;
}

.brown {
  border-color: brown;
}

<div class="container">
  <div class="button-group">     
    <div class="box red">R</div>
    <div class="box green">G</div>
  </div>

  <div class="button-group">     
    <div class="box blue">Bl</div>
    <div class="box yellow">Y</div>      
  </div>
  
  <div class="button-group">     
    <div class="box pink">P</div>
    <div class="box brown">Br</div>      
  </div>
</div>

Answer 2

如果您删除flex并将纽扣组显示内联，但他们的孩子显示内联块（因此他们都显示内线并占用给定的维度），您将获得所需的结果。

更新：要删除框之间的空间，请设置并重置字体大小如下：

.container {
  height: 200px;
  width: 200px;
  border: 5px solid black;
  padding: 5px;
  font-size: 0;
}

.button-group {
  display: inline;
}

.box {
  height: 45px;
  width: 45px;
  border-width: 5px;
  border-style: solid;
  display: inline-block;
  font-size: initial;
}

.red {
  border-color: red;
}

.green {
  border-color: green;
}

.blue {
  border-color: blue;
}

.yellow {
  border-color: yellow;
}

.pink {
  border-color: pink;
}

.brown {
  border-color: brown;
}

<div class="container">
  <div class="button-group">
    <div class="box red">R</div>
    <div class="box green">G</div>
  </div>

  <div class="button-group">
    <div class="box blue">Bl</div>
    <div class="box yellow">Y</div>
  </div>

  <div class="button-group">
    <div class="box pink">P</div>
    <div class="box brown">Br</div>
  </div>
</div>