JSFiddle - React, Tailwind, and code Playground

by smacky311

HTML

<div id="container">
  <div id="Banner">Banner content</div>
  <div id="Header">Header Content</div>
  <div id="mainContent">
    <div>main content</div>
    <div>main content2 </div>
    <div>main content 3</div>
    <div>main content 4</div>
    <div>main content 5</div>
    <div>main content 6</div>
    <div>main content 7</div>
  </div>
  <div id="absolutePositionedElement">
    absolute positioned stuff
  </div>
  <div id="Header">
    Header Content
  </div>
</div>

CSS

#mainContent {
  overflow: scroll; 
  background-color: #00FFFF;
  width: 500px;
  height: 100px;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex; /* or inline-flex */
  background-color: red;
  flex-wrap: wrap;
  flex-direction: row;
}