I have a bunch of pairs of elements. Each pair has two divs. I'd like each pair to sit side-by-side if they can fit on the same line, else I'd like them to sit one on top of the other. Here's the situation:
.pair {
display: flex;
flex-direction: row;
}
div {
margin: 0 5px;
}<div class="pair">
<div>Yeet a deet</div>
<div>Make me display:block when the container can't fit the divs side-by-side</div>
</div>Without setting a breakpoint or using JS, is there a way to make these divs display: block when they can no longer fit side-by-side without wrapping? Any pointers would be very helpful!
Would flex-wrap not solve it?
.pair {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.pair > * {
box-shadow: 0 0 0 1px blue;
flex: 1 1 auto;
}
div {
margin: 0 5px;
}<div class="pair">
<div>Yeet a deet</div>
<div>Make me display:block when the container can't fit the divs side-by-side</div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments