JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<div class="flex two">
	<div class="cell">1</div>
  <div class="cell">2</div>
</div>

<br />

<div class="flex four">
	<div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
</div>

<br />

<div class="flex two">
	<div>
    <div class="flex two">
      <div class="cell">1</div>
      <div class="cell">2</div>
    </div>
  </div>
  <div>
    <div class="flex two">
      <div class="cell">1</div>
      <div class="cell">2</div>
    </div>
  </div>
</div>

<br />

Fixed version:

<br />

<div class="flex fixed-two">
	<div class="cell">1</div>
  <div class="cell">2</div>
</div>

<br />

<div class="flex fixed-four">
	<div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
</div>

<br />

<div class="flex fixed-two">
	<div>
    <div class="flex fixed-two">
      <div class="cell">1</div>
      <div class="cell">2</div>
    </div>
  </div>
  <div>
    <div class="flex fixed-two">
      <div class="cell">1</div>
      <div class="cell">2</div>
    </div>
  </div>
</div>

CSS

/* General styles for both */
body {
  margin: 0;
}

.flex {
  display: flex;
  gap: 20px;
}

.two > *, .four > *, .fixed-two > *, .fixed-four > * {
  flex: 0 0 auto;
}

.cell {
  background: #eee;
}

/* "broken" styles */
.two, .four {
  flex-basis: 100%;
}

.two > * {
  flex-basis: 50%;
}

.four > * {
  flex-basis: 25%;
}

/* Only solution is to remove the gap size, and that can only be done if there is as many gaps as sections */
.fixed-two,
.fixed-four{
  display: flex;
  gap: 0;  /* Cries */
  width: calc(100% + 20px);
  margin-left: -20px;
  overflow: hidden;
}
.fixed-two > * {
  margin-left: 20px;
  width: calc(50% - 20px);
}
.fixed-four > * {
  margin-left: 20px;
  width: calc(25% - 20px);
}