JSFiddle - React, Tailwind, and code Playground

by eveevans

HTML

<div class='wrapper'>
  <div class='header'>
    <h1>header</h1>
  </div>
  
  <div class='content'>
    <div class='large_content'>
      ...long and scrolled
    </div>
  </div>
</div>

CSS

html, body { 
  padding: 0; margin: 0;
  height: 100%;
}

.wrapper {
  height: 100%;
  background: #d0d0d0;
  box-shadow: inset 0px 0 0px 1px red;
  
  display: flex;
	-webkit-flex-flow: column; /* doesn't work without prefix */
	flex-flow: column;
}


.header {}

.content {
  min-height: 0;
  overflow: auto;
 /* flex-grow: 2; */
 	flex: 1;
	overflow: auto; 
}

.large_content {
  height: 1800px;
}