I have a simple code example available on codepen, but here is the markup for convenience:
<div class="container my-container">
<div class="row m-row justify-content-between">
<div class="col-2 my-col">One of three columns</div>
<div class="col-5 my-col">One of three columns</div>
<div class="col-5 my-col">One of three columns</div>
</div>
</div>
And here is some custom CSS:
.my-row {
justify-content: stretch;
}
.my-col {
background: yellowgreen;
border: 1px gray solid;
align-self: stretch;
}
When viewing with a larger screen width, everything looks fine: https://i.sstatic.net/vkWiu.png
However, when I set smaller sizes by adjusting the width of my-container to 150px, the items start wrapping. Here's the result:
https://i.sstatic.net/x1AHO.png
How can I make the wrapped items fill the remaining width?