JSFiddle - React, Tailwind, and code Playground

by yaili

HTML

<div class="wrapper">
        
            <div class="box one">
            height: 90%
            </div>    
            
            <div class="box two">
            height: calc(90% - 20px)
            </div>
            
            <div class="box three">
            min-height: 90%
            </div>
            
            <div class="box four">
            min-height: calc(90% - 20px)
            </div>
            
            <div class="box five">
            height: 90vh
            </div>
            
            <div class="box six">
            min-height: 90vh
            </div>
            
            <div class="box seven">
            </div>    
            height: calc(90vh - 20px)
    
            
        </div>

CSS

body, div { margin: 0; padding: 0; }
            .wrapper { background: #f7f7f7; height: 400px; padding: 50px; }
            .box { border: 2px solid red; display: inline-block; margin-left: 10px; width: 160px; vertical-align: top; overflow: hidden; }
            .one { height: 90%; }
            .two { height: -webkit-calc(90% - 20px); height: -moz-calc(90% - 20px); height: calc(90% - 20px); }
            .three { min-height: 90%; }
            .four { min-height: -webkit-calc(90% - 20px); min-height: -moz-calc(90% - 20px); min-height: calc(90% - 20px); }
            .five { height: 90vh; }
            .six { min-height: 90vh; }
            .seven { height: -webkit-calc(90vh - 20px); height: -moz-calc(90vh - 20px); height: calc(90vh - 20px); }