How can I ensure that a middle <div> can shrink before affecting the first <div> within a flex box ?
How can I ensure that within a flex container, the middle <div> shrinks first if needed, and if the first <div> is longer, it also shrinks without pushing the last <div> (which contains a badge) to the right, ensuring it does not shrink at all?
here is the demo to the codepen: https://codepen.io/umanga/pen/WNWYore
7 Replies
doesn't flex: basis do that?
you want the first div to shrink after the middle has shrunk or not shrink at all? sounds like you need to give the first one a higher flex-grow value or if not shrink at all, remove its flex-shrink capability
that will probably work a lot better
acctually i think itll be a combination of flex-basis and messing with flex-grow/flex-shrink values depending on what OP is trying to accomplish. So they likely just need the
flex propertyyup, that will probably work better
Yes combination of, flex-grow, flex-basis and flex-shrink worked.
thanks a lot guys.
you're welcome