JSFiddle - React, Tailwind, and code Playground
HTML
<div id="one"> one </div>
<div id="two">
sdfwwvw
</div>
CSS
html{
height: 100%;
}
body{
min-height: 100%;
margin:0;
padding:0;
background: yellow;
}
body, #two{
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#two{
background: pink;
width: 100%;
min-height: 100%;
width: 100%;
-webkit-box-flex: 10;
-moz-box-flex: 10;
-webkit-flex: auto;
-moz-flex: auto;
-ms-flex: auto;
flex: 1 1 auto;
}