I am working with a flex container setup like this:
.container {
display: flex;
flex-flow: row wrap;
justify-content: start;
width: 100%;
}
.item {
border: 1px solid red;
flex: 1 1 33%;
height: 100px;
}<div class="container">
<div class="item">#1</div>
<div class="item">#2</div>
<div class="item">#3</div>
<div class="item">#4</div>
<div class="item">#5</div>
</div>The number of divs in the row within the container adjusts based on the screen size, so I opted for using the flex shorthand with flex-grow: 1 to ensure smooth size adjustments.
However, my issue lies in wanting #4 and #5 to have the same width as #1, #2, and #3 instead of taking up the entire space available.