JSFiddle - React, Tailwind, and code Playground

by Stephane de Luca

HTML

<htlm>
  <body>
  <div class="wrapper">
    <div class="first hScrollable">
      <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    </div>
    <div class="second vScrollable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut elit sed nulla convallis imperdiet convallis ac ipsum. Duis blandit ac arcu at vehicula. Duis at aliquam elit. Curabitur viverra ligula tellus, a congue ligula maximus semper. Nullam magna quam, vestibulum quis viverra a, efficitur eget leo. Maecenas gravida tellus quis enim euismod, ac porta leo aliquam. Nullam imperdiet nunc in ipsum dignissim, nec lacinia nulla tempor.

Nunc non purus rutrum, convallis lacus euismod, egestas dui. Cras et sem imperdiet, gravida dolor a, facilisis dui. Suspendisse feugiat purus sed elit laoreet tempus. Donec dictum vehicula mauris, sed dictum nisi maximus sit amet. Suspendisse laoreet, tortor fermentum sodales rhoncus, tellus enim efficitur elit, vel congue odio nisl at velit. Duis sodales nibh venenatis velit dictum, eget fermentum libero laoreet. Phasellus vitae ex eget ex tincidunt sodales sed vitae nunc. Mauris est lacus, faucibus non dolor vel, scelerisque venenatis metus. Suspendisse ac rhoncus leo. Donec vitae massa sapien. Proin placerat fermentum felis, nec finibus tellus. Donec eget tortor pretium, auctor orci id, dictum quam. Pellentesque vel ornare erat. Duis nec nisl quis orci rhoncus tristique. Curabitur lobortis efficitur scelerisque.

Nulla facilisi. Fusce justo dolor, sollicitudin at velit vitae, feugiat dictum ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam rhoncus arcu ut rhoncus luctus. Aenean auctor gravida sapien, vel sollicitudin mauris suscipit quis. Pellentesque lacinia arcu felis, non elementum justo pretium ut. Sed sit amet est sagittis nulla imperdiet tempor ac mattis sem. Curabitur a blandit orci, vel pulvinar leo. Donec vel leo porta, pretium augue a, sollicitudin ex. Vivamus dapibus erat...

CSS

* {
    box-sizing: border-box;
}
.wrapper {
  width: 10cm;
  height: 10cm;
  display: flex;
  flex-direction: column;
}

.first {
  width: 100%;
}

.second {
  flex: 1;
}

.first {
  display: flex;
  flex-direction: row;

  background-color: rgb(100,10,10);
  padding: 0.2em;
}
.first>div {
    flex: 1 0 auto;
  width: 10cm;
  height: 100%;
  background-color: red;
  border: solid 2px white;
  padding: .2em;
  text-align: center;
  flex: 2;
}

.hSCrollable {
    overflow-x: scroll;
    overflow-y: hidden;
}


.vScrollable {
  overflow-y: scroll;
  overflow-x: hidden;
}