Flex Grow

by ced1

HTML

<div class="flex">
     <div class="flex-i">#ord00dddffffff000376sufdiwnfgw</div>
     <div class="flex-i">11:54:02, 03-12-2018l</div>
     <div class="flex-i">2824,89€</div>
</div>

<div class="flex">
     <div class="flex-i">Just Normal</div>
     <div class="flex-i">Just Normal</div>
     <div class="flex-i">Just Normal</div>
</div>

<div class="flex">
     <div class="flex-i">#ord00000372suf</div>
     <div class="flex-i">11:32:24, 03-12-2018</div>
     <div class="flex-i">24,71€</div>
</div>

CSS

.flex {    
 display: flex;
position: relative;
}
.flex-i {
 color: white;
 background-color: blue;
 padding: 20px;
 flex-grow: 1;
 border: 5px solid red;
 text-align: center;
 flex-basis: 33%;
  
}
.flex-i:first-child {
 border-right: 0;
 flex-grow: 5;
 word-wrap: break-word;
 max-width: 25%;
 
}
.flex-i:last-child {
 border-left: 0;
 flex-grow: 5;
}