JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: flex; align-items: flex-start; background-color: blue; width: 500px;">
  <p style="width: 50px; background-color: cyan; flex-shrink: 0">
    Yo
  </p>
  <div style="display: flex; flex: 1 1 0px; align-items: flex-start; background-color: green; overflow: visible">
    <p style="flex-shrink: 0">This is some text</p>
    <p style="flex-shrink: 0">This is some text</p>
    <p style="flex-shrink: 0">This is some text</p>
    <p style="flex-shrink: 0">This is some text</p>
    <p style="flex-shrink: 0">This is some text</p>
    <p style="flex-shrink: 0">This is some text</p>
    <p style="flex-shrink: 0">This is some text</p>
    <p style="flex-shrink: 0">This is some text</p>
    <p style="flex-shrink: 0">This is some text</p>
    <p style="flex-shrink: 0">This is some text</p>
    <p style="flex-shrink: 0">This is some text</p>
    <p style="flex-shrink: 0">This is some text</p>
    <p style="flex-shrink: 0">This is some text</p>
    <p style="flex-shrink: 0">This is some text</p>
  </div>
</div>

<!-- magenta 500px indicator here added for comparison of width -->
<div style="width: 500px; height: 5px; background-color: magenta; margin-bottom: 10px"></div>