JSFiddle - React, Tailwind, and code Playground

by Arthur Lutkevichus

HTML

<div id="parent">
  <div id="prechild">
    <div id="child1">
      1
    </div>
    <div id="child2">
      2
    </div>
    <ul id="child3">
      <li>3</li>
      <li>3</li>
    </ul>
  </div>
</div>

CSS

#parent {
  width: 300px;
  display: inline-block;
  overflow: auto;
}

#prechild {
  display: table;
  width: 100%;
}

#child1 {
  background: green;
  padding: 20px;
}

#child2 {
  width: 500px;
  background: red;
  padding: 20px;
}

#child3 {
    display: inline-block;
    background: pink;
    white-space: nowrap;
    min-width: 100%;
}

#child3 > li {
  display: inline-block;
  min-width: 100px;
}