JSFiddle - React, Tailwind, and code Playground

HTML

You should see a lime square, and no red should be visible.
<div class="flex">
  <div class="item">
    <div class="inner">
    </div>
  </div>
</div>

CSS

.flex {
  display: flex;
}

.item {
  width: 300px;
  /* ignored */
  flex-basis: 200px;
  /* overridden by later declaration */
  flex-basis: min-content;
  background: red;
}

.inner {
  width: 100px;
  height: 100px;
  background: lime;
}