在嵌套的flexbox容器中缩小包含图像的flexbox

Question

I try to ajust some dynamic content so it fit onto label to be printed.

The label has a row (.symbolContainer) that can contain 0 or more images. The objective is to shrink that .symbolContainer and those images if the content of .text box need more spaces.

EDIT: The row of images should not wrap, but shrink from 75px to a minimum of 25px.

Seem to me that flexbox is the way to go, and it ended up with 3 levels of nested flexbox, but the images inside the .symbolContainer won't shrink.

Content of .text div can overflow the .body div, but I will adjust the font-size with javascript after.

It is possible to acheive this with flexbox or other tricks?

Here is what I have done so far. Comment in CSS is what I wanted to do.

 .container { width: 3.5in; height: 5in; border: 1px solid black; border-radius: 6px; display: flex; flex-direction: column; } .title { font-weight: bolder; font-size: 24px; text-align: center; } .body { background-color: #aad9fa; flex: 1; overflow: hidden; display: flex; flex-direction: column; } .symbolContainer { display: flex; justify-content: center; background-color: #c1f1bf; flex: 0 1 75px; /* Height is 75px but shrink if need to */ /* No minimum height because can be empty */ } .symbolContainer>img { flex: 0 1 75px; /* Size start at 75 px then shrink */ min-width: 25px; /* but don't shrink pass 25px */ align-self: flex-start; } .text { font-size: 22px; flex: 1; /* Take maximum possible space */ } .footer { text-align: center; height: 30px; background-color: green; } 

 <div class='container'> <div class='title'> A title that can be multiline because of his variable length </div> <div class='body'> <div class='symbolContainer'> <img src="https://simdut.claurendeau.qc.ca/public/img/vector/flamme.svg"> <img src="https://simdut.claurendeau.qc.ca/public/img/vector/nocif.svg"> </div> <div class="text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum risus ex, nec gravida augue iaculis vel. Nam malesuada vitae libero ac tempus. Aenean et ipsum ac justo malesuada venenatis. Proin consequat tellus et varius mattis. Vestibulum cursus dui in tincidunt pellentesque. Nullam feugiat lacus sem, et dapibus sapien maximus eu. </p> <p>Vivamus ullamcorper odio ex, sed rhoncus tellus sagittis eu. Proin egestas erat metus, sed congue dolor efficitur ac. Fusce ultrices quis urna vel tristique. Ut fermentum ipsum tellus, vel accumsan dui malesuada nec. Vivamus aliquam justo vel tortor luctus, non venenatis lectus sagittis. Morbi feugiat sem nec elit varius ultricies.</p> </div> </div> <div class='footer'> This is the footer. Can be fixed height </div> </div> 

Answer 1

You don't need those layers for the Flex Containers in order to do the images responsive.

Symbol Container should be:

.symbolContainer{
 min-width: 0; /* resize as what you want */
 margin: 5px; /* resize as what you want */
}

img {
width: 450px; /* resize as what you want */
max-width: 100%; /* resize as what you want */ 
max-height: 450px; /* resize as what you want */
}

.imgContainer{
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}

Now the html should change to:

 <div class='body'>
   <div class='imgContainer'>
      <div class='symbolContainer'>
        <img src="https://simdut.claurendeau.qc.ca/public/img/vector/flamme.svg">
        <img src="https://simdut.claurendeau.qc.ca/public/img/vector/nocif.svg">
      </div>
   </div>
...

That should do what you want. Be aware to resize to what you want.

Hope it helps!

pd. It's based on this post:

https://medium.com/@sashatran/check-out-the-page-here-7d71a2c43a10