JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <!-- <span>sdfghgfhgfhfghfh</span> -->
  <div class="inner">
    <div>
      sdfsddfgdfgdfgdfgdfgdgdgdfgdfgdgdg
    </div>
  </div>
</div>
<div style="width: 100px; height: 20px; background-color: green;"></div>

CSS

* {
  box-sizing: border-box;
}

.outer {
  background-color: blue;
  color: white;
  display: flex;
  overflow: auto;
  padding: 100px;
}

.inner {
  background-color: red;
  border: 1px solid white;
  /*display: inline-block;*/
  display: flex;
  flex: 1 1 1e-09px;
  /*height: 100px;*/
  /*margin: 40px;*/
  /*overflow: hidden;*/
  /*width: 400px;*/
}

.outer::after {
  content: "";
  flex: 0 0 100px;
}