I've reordered some elements in my html using flexbox in the responsive design of a website which works fine but the elements then won't resize properly.
At a breakpoint I have applied a class of flex to the home-promos
div and reordered the elements. This works correctly.
The problem then arises when I try to resize the div's to percentage widths. They will only resize up to a certain point, such as 50% and then won't get any bigger.
Is anyone who is better with flexbox than myself able to tell me what the issue is?
.home-promos {
display: flex;
}
.home-promo-center {
order: 1;
}
.home-promo-left {
order: 2;
}
.home-promo-right {
order: 3;
}
<div class="home-promos">
<div class="home-promo-left">
<div class="promo-left-content">
*content*
</div>
</div>
<div class="home-promo-center">
<div class="promo-center-content">
*content*
</div>
</div>
<div class="home-promo-right">
<div class="promo-right-content">
*content*
</div>
</div>
</div>
See Question&Answers more detail:os