<div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item item2"> <div class="flex-item2"></div> <div class="flex-item2"></div> <div class="flex-item2"></div> </div> <div class="flex-item">flex item 3</div> </div>
.flex-container { display: flex; width: 600px; height: 600px; flex-direction: column; background-color: Silver; } .flex-item { background-color: DeepSkyBlue; height: 100px; margin: 5px; } .flex-item2 { background-color: yellow; width: 200px; flex: 1; margin: 5px; } .item2 { flex: 1; display: flex; }