Is there a method to instruct flexbox items to occupy the available space while wrapping as soon as they become smaller than their content?
However, some items have a fixed width percentage.
HTML
<div class="grid">
<div class="grid__item">column auto</div>
<div class="grid__item one-third">column 33.333%</div>
<div class="grid__item one-third">column 33.333%</div>
<div class="grid__item">column auto</div>
</div>
CSS
.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background: gray;
}
.grid__item {
background: red;
flex: 1;
}
.one-third {
flex-basis: 33.333%;
background: green;
}
The aim is for the designated width items (green) to consistently be at 33.333%. The other items (red) should take up the remaining space. When the screen size decreases, I want the items to wrap if there isn't enough space to display their content.
I initially believed that applying flex: 1 and flex-wrap: wrap on the container would achieve this, but in the provided example, they do not wrap correctly. Removing flex: 1 from .grid__item causes them to somewhat wrap, but not entirely on very small screens.