JSFiddle - React, Tailwind, and code Playground

HTML

<code>width: auto &amp; min-width: auto (default)</code>
<article>
  <section>With these settings, this item CANNOT shrink past its content size. Resize horizontally to see.</section>
</article>

<code>width: 400px &amp; min-width: auto (default)</code>
<article>
  <section>With these settings, this item CAN shrink past its content size, but CANNOT shrink past its defined width.</section>
</article>

<code>width: 400px &amp; min-width: 200px (override)</code>
<article>
  <section>With these settings, this item CAN shrink past its content size, but CANNOT shirnk past its min size.</section>
</article>


<code>width: 400px &amp; min-width: 0 (override)</code>
<article>
  <section>With these settings, this item CAN shrink past its content size AND its defined width.</section>
</article>

CSS

article {
  display: flex;
}

article:nth-of-type(1) > section {
  width: auto;
  flex-grow: 1;
}

article:nth-of-type(2) > section {
  width: 400px;
  flex-grow: 1;
}

article:nth-of-type(3) > section {
  width: 400px;
  flex-grow: 1;
  min-width: 250px;
  flex-shrink: 1;
}

article:nth-of-type(4) > section {
  width: 400px;
  flex-grow: 1;
  min-width: 0;
  /* can also use overflow property with any value other than `visible` */
}


/* non-essential demo styles */

article {
  margin-bottom: 25px;
}

section {
  white-space: nowrap;
  height: 50px;
  background-color: lightgreen;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
}

body {
  margin: 25px 50px;
}