JSFiddle - React, Tailwind, and code Playground

HTML

flex-basis: 100px;
<div class="container">
  <div class="box flex-basis-100">One</div>
  
  <div class="box">Two</div>
  
  <div class="box">Three</div>
</div>

flex-basis: content;
<div class="container">
  <div class="box flex-basis-content">One</div>
  
  <div class="box">Two</div>
  
  <div class="box">Three</div>
</div>

flex-basis: content; width:10px;
<div class="container">
  <div class="box flex-basis-content w-10">One</div>
  
  <div class="box">Two</div>
  
  <div class="box">Three</div>
</div>

flex-basis: auto;
<div class="container">
  <div class="box flex-basis-auto">One</div>
  
  <div class="box">Two</div>
  
  <div class="box">Three</div>
</div>

flex-basis: auto; width:10px;
<div class="container">
  <div class="box flex-basis-auto w-10">One</div>
  
  <div class="box">Two</div>
  
  <div class="box">Three</div>
</div>

CSS

body{
  font-family:sans-serif;
}

.container
{
  display:flex;
  width:400px;
  margin-bottom:10px;
}

.box{
  background:lightblue;
  margin:0 1px;
}

.flex-basis-100
{
  flex-basis:100px;
}

.flex-basis-content
{
  flex-basis:content;
}

.flex-basis-auto
{
  flex-basis:auto;
}

.w-10{
  width:10px;
}