JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en-us"><head>
<meta charset="utf-8">
<style>
* { min-height: 0 }
.topicEditHeader, ul.nav-tabs > li, .shortenText {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
html, body{
margin: 0;
}
html, body {
height: 100vh;
max-height: 100vh;
/*height: 100vw;*/
/*overflow: hidden;*/
}
/** .page **/
.page {
display: flex;
flex-direction: column;
position:absolute;
width: 100vw;
height: 100vh;
max-height: 100vh;
}
.page > menu {
flex-grow: 0;
flex-shrink: 0;
}
.page > #divBelowStatusbar {
flex-grow: 1;
flex-shrink: 1;
}
/** END .page **/
/** menu **/
menu {
background-color: gray;
margin-top: 0;
margin-bottom: 3px;
/*position: absolute;*/
/*top: 0px;*/
}
menu > li > a {
color: white;
}
menu > li {
padding-right: 20px;
display: inline-flex;
list-style-type: none;
}
/** END menu **/
/** #divBelowStatusbar **/
#divBelowStatusbar {
flex-direction: column;
display: flex;
}
#divBelowStatusbar > #errors {
flex-grow: 0;
}
#divBelowStatusbar > #contentArea {
/*flex: 1;*/
flex-shrink: 1;
flex-grow: 1;
}
/** END #divBelowStatusbar **/
/** #contentArea **/
#divBelowStatusbar > #contentArea {
margin-right: 20px;
display: flex;
flex: 1;
}
/** END #contentArea **/
/** .tabContent **/
.tabContent {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.tabContent > .paneHeader {
display: flex;
flex-shrink: 0;
flex-grow: 0;
padding-bottom: 10px;
}
.tabContent > .paneHeader > .paneHeaderHeading {
flex-grow: 1;
}
.tabContent > .paneHeader > .paneHeaderTools {
flex-shrink: 0;
flex-grow: 0;
}
.tabContent > .content {
overflow-y: scroll;
flex-grow: 1;
min-height: 300px;
}
/** TODO: nest **/
.cmbtab {
flex-grow: 1; flex-shrink: 1;
}
.tabHeadersContainer {
display: flex;
flex-shrink: 0;
}
.tabContentsContainer {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.tabContentsContainer > div {
display:...