html - 在嵌套的 flexbox 容器中收缩包含图像的 flexbox

Question

我尝试调整一些动态内容，使其适合要打印的标签。

标签有一行 (.symbolContainer)，可以包含 0 个或多个图像。目标是在 .text 框的内容需要更多空间时缩小 .symbolContainer 和那些图像。

编辑:图像行不应换行，而应从 75 像素缩小到至少 25 像素。

在我看来 flexbox 是可行的方法，它最终有 3 层嵌套的 flexbox，但是 .symbolContainer 中的图像不会缩小。

.text div 的内容可以溢出.body div，但之后我会用javascript 调整字体大小。

可以通过 flexbox 或其他技巧来实现吗？

这是我到目前为止所做的。 CSS 中的注释是我想做的。

.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

为了使图像响应，您不需要 Flex 容器的这些层。

符号容器应该是:

.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;
}

现在 html 应该更改为:

 <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>
...

那应该做你想做的。请注意根据需要调整大小。

希望对您有所帮助!

PD。它基于这篇文章:

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