SO-70985810

by David Thomas

HTML

<div class="wrap">
  <div class="container">
    <div class="col">
      50%
    </div>
    <div class="col">
      50%
    </div>
    <div class="col"></div>
  </div>

  <div class="container">
    <div class="col">
      33.3%
    </div>
    <div class="col">
      33.3%
    </div>
    <div class="col">
      33.3%
    </div>
  </div>

  <div class="container">
    <div class="col">
      100%
    </div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

CSS

*, ::before, ::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

.wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2em;
  margin-block: 2em;
  margin-inline: auto;
  width: 500px;
  height: 100vh;
}

.container {
 display: flex;
 width: 500px;
 background-color: #ffa9;
}

.col {
 padding: 1em;
 flex-grow: 1;
}

.col:nth-child(1) {
  background-color: red;
}

.col:nth-child(2) {
  background-color: green;
}

.col:nth-child(3) {
  background-color: blue;
}

.col:empty {
   display: none;
}