Here is the template I am working with:
<div id="row">
<div id="longer"></div>
<div id="shorter"></div>
</div>
In the same row, I want longer to occupy twice as much width as shorter. To achieve this, I have applied the following CSS:
#row {
display: flex;
flex-wrap: wrap;
}
#longer {
flex: 1 0;
}
#shorter {
flex: 0.5 0;
}
While this setup works fine, an issue arises when shorter wraps onto a new line and only takes up 50% of that row's width despite being the only item in the row.
I intend for shorter to fill the entire row if it's the lone item on the line. Does anyone know if this can be achieved without using media queries?