JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<html>
    <head>
        <title></title>
    </head>
    <body>
    
    
        <div id=header>
            Lorem Ipsum        
        </div>
                <div id=fullheight>
                            
                                    
    <div class=flex2-item>
            hello world
        </div>   <div class=flex2-item>
            hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello
                        hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello
                                    hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello            hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello            hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello            hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello            hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello            hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello            hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello            hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello
         ...

CSS

html, body {margin:0;
    min-height: 100% !important;
    height: 100%;
}
#header {margin:0;position:fixed;top:0;left:0;width:100%;
    height: 50px;
    background: red;
}

#fullheight {margin-top:50px;
    height: 100%;
    background: blue;
    height: calc(100% - 50px);
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    }

   

.flex2-item:nth-child(1) {background-color:yellow;margin:10px 0;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex2-item:nth-child(2) {margin:10px 0;background-color:yellow;width:400px;overflow: auto;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }
    
.pic {height:100%;background-color:yellow;float:left;}
.pic2 {height:100%;background-color:yellow;float:left;width:400px;overflow: auto;display:inline;}