I need assistance with creating a responsive three-column grid layout using Flex in CSS. I have achieved a fairly responsive design by following the CSS provided in the fiddle link below. However, I am facing an issue where the second column (the blue one) is not shrinking when resizing the screen, causing the yellow column to disappear instead. Please refer to the example gif for clarification: Example video
How can I adjust the CSS to make the blue box shrink when resizing so that the yellow box remains visible?
This is the current CSS implementation:
.container-main {
margin: 50px;
}
.box-container {
display:flex;
//align-items: flex-start;
background-color: #cccccc;
align-content: stretch;
}
.box-tick-code {
background-color: red;
flex-basis: 100%;
height: 40px;
flex-flow: row nowrap;
flex-shrink: 2;
min-width: 0px;
min-height: 0px;
overflow: hidden;
}
.box-tick-title {
background-color:blue;
display:flex;
flex-basis: 100%;
height: 40px;
flex-shrink: 1;
min-width: 0px;
min-height: 0px;
overflow: hidden;
}
.long-title {
overflow:hidden;
display:inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
.box-more-info {
background-color:yellow;
flex-basis: 100%;
height: 40px;
flex-shrink: 2;
min-width: 0px;
min-height: 0px;
overflow: hidden;
}
You can view the HTML/CSS code in this JSFiddle link: