JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Is the purple area wider than the orange area?</h4>
<div class="container">
  <!-- First item has large content, small max-width: -->
  <div class="item1">
    <div style="width: 500px"></div>
  </div>

  <!-- Second item is simple; just a small width -->
  <div class="item2"></div>
</div>

CSS

.container {
    display:flex;
    width: 100px;
    height: 20px;
    border: 1px solid black;
}
.item1 {
    min-width:0;
    max-width: 80px;
    background: purple;
}
.item2 {
    min-width:0;
    width: 80px;
    background: orange;
}