<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="own-flex"> <div style="background-color:coral;"> Copyright (C) 2016 Microsoft Corporation. All rights reserved. </div> <div style="background-color:lightblue;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:khaki;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:pink;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:lightgrey;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:pink;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:red;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:green;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:coral;"> Copyright (C) 2016 Microsoft Corporation. All rights reserved. </div> <div style="background-color:navyblue;"> Copyright (C) 2016 Microsoft Corporation. All rights reserved. </div> <div style="background-color:coral;"> Copyright (C) 2016 Microsoft Corporation. All rights reserved. </div> </div> <h2>Flex Reverse</h2> <div id="own-flex-reverse"> <div style="background-color:coral;"> Copyright (C) 2016 Microsoft Corporation. All rights reserved. </div> <div style="background-color:lightblue;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:khaki;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:pink;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:lightgrey;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:pink;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:red;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:green;">Copyright (C) 2016 Microsoft Corporation. All rights reserved.</div> <div style="background-color:coral;"> Copyright (C) 2016 Microsoft Corporation. All rights reserved. </div> <div style="background-color:navyblue;"> Copyright (C) 2016 Microsoft Corporation. All rights reserved. </div> <div style="background-color:coral;"> Copyright (C) 2016 Microsoft Corporation. All rights reserved. </div> </div> </div>

#own-flex { height: 100%; border: 1px solid #c3c3c3; display: -webkit-flex; /* Safari */ display: flex; -webkit-flex-grow: 1; /* Safari 6.1+ */ -webkit-flex-shrink: 1; /* Safari 6.1+ */ -webkit-flex-basis: 100px; /* Safari 6.1+ */ flex-grow: 1; flex-shrink: 1; flex-basis: 100px; } #own-flex div { flex-grow: 1; flex-shrink: 1; flex-basis: 100px; padding: 1rem 0.5rem; } #own-flex-reverse { height: 100%; border: 1px solid #c3c3c3; display: -webkit-flex; /* Safari */ display: flex; -webkit-flex-grow: 1; /* Safari 6.1+ */ -webkit-flex-shrink: 1; /* Safari 6.1+ */ -webkit-flex-basis: 100px; /* Safari 6.1+ */ flex-grow: 1; flex-shrink: 1; flex-basis: 100px; flex-direction: row-reverse; } #own-flex-reverse div { flex-grow: 1; flex-shrink: 1; flex-basis: 100px; padding: 1rem 0.5rem; }