My current challenge involves utilizing Flexbox to create a responsive layout with 5 boxes that shrink when the browser window is resized. However, 4 of these boxes are not reducing their width as expected when placed in columns.
(Despite Bob behaving correctly, Kate, Nick, Jane, and Fred are resisting shrinking their width.)
How can I adjust the column widths so they resize accordingly when the browser window size changes?
.container {
display: flex;
width: 100%;
justify-content: center;
border: 2px solid red;
}
.column {
display: flex;
flex-direction: column;
}
.big {
display: flex;
width: 400px;
height: 400px;
background: yellow;
border: 5px solid blue;
}
.small {
display: flex;
width: 195px;
height: 195px;
background: yellow;
border: 5px solid blue;
}<div class="container">
<div class="big"><span>Bob</span></div>
<div class="column">
<div class="small"><span>Kate</span></div>
<div class="small"><span>Nick</span></div>
</div>
<div class="column">
<div class="small"><span>Jane</span></div>
<div class="small"><span>Fred</span></div>
</div>
</div>View the demo here: https://jsfiddle.net/CodeCabbie/1xvjeo3p/44/