How to wrap inline-flex div content such that the wrapped portion occupies empty space below the previous inline-flex div?

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

Actual:

^ If there is only one box in the first button-group and two box in the second button-group then all three occupy the first line. However, as soon as you add a third box to the second button-group, all of its three box move to the next line. Instead of that happening, I want the box to occupy any available space on the lines, regardless of which button-group they belong to.

Expected:

Overall expectation: There could be n number of inline-flex divs inside container and m number of box inside button-group. Any button-group or any box could be removed dynamically. At the end, there must be three box on each line, or as many as possible w.r.t. to available width.

Thank you.

by Deepak in StackOverflow on 2022-06-05.

Answer

Remove the button-group using display:contents and move display:flex to the container

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

by Temani Afif on 2022-06-05.

Other helpful answers

If you remove the flex and make the button-groups display inline but their children display inline-block (so they both display inline and take up the given dimensions) you get the required result.

UPDATE: to remove the space between the boxes, set and reset the font-sizes as below:

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

by A Haworth on 2022-06-05.