JSFiddle - React, Tailwind, and code Playground

by jay_zou

HTML

<div class="wrap">
        <div class="container">
            <div class="content">
                <div class="box flex-grow1" style="background-color:red;">flex-shrink:1</div>
                <div class="box flex-grow2" style="background-color:lightblue;">flex-shrink:2</div>
	            <div class="box flex-grow3" style="background-color:yellow;">flex-shrink:3</div>
            </div>
        </div>
    </div>

CSS

.wrap {
	        display: -webkit-flex;
	        display: flex;
	    }
	    
	    .content {
	        width: 500px;
	        height: 200px;
	        border: 1px solid #c3c3c3;
	        display: -webkit-flex;
	        display: flex;
	        -webkit-flex-direction: row;
	        flex-direction: row;
	        flex-wrap: nowrap;
	        -webkit-flex-wrap: nowrap;
	    }
	    
	    .flex-grow1{
	    	/*flex-grow: 1;*/
	    	flex-shrink: 1
	    }
	    .flex-grow2{
	    	flex-shrink: 2
	    }
	    .flex-grow3{
	    	flex-shrink: 3
	    }
	    
	    .box {
	        width: 200px;
	    }