JSFiddle - React, Tailwind, and code Playground

by Wexcode

HTML

<p>Without flex-basis</p>

<div class='without-flex-basis'>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class='without-flex-basis'>
  <div></div>
  <div>Some Content</div>
  <div>Even More Content</div>
</div>

<p>With flex-basis</p>

<div class='with-flex-basis'>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class='with-flex-basis'>
  <div></div>
  <div>Some Content</div>
  <div>Even More Content</div>
</div>

CSS

.without-flex-basis, .with-flex-basis {
  display: flex;
  width: 300px;
  margin-bottom: 40px;
}

.without-flex-basis > div, .with-flex-basis > div {
  border: 1px solid #000;
  height: 80px;
}

.without-flex-basis > div {
  flex-grow: 1;
}

.with-flex-basis > div {
  flex-basis: 0;
  flex-grow: 1;
}