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
here is the demo to the codepen: https://codepen.io/umanga/pen/WNWYore

