如何在flexbox中获得具有外部高度和内部宽度的div

Question

假设我们有一个垂直的（即flex-direction：column）flexbox容器，具有给定的宽度和高度。flexbox包含div，每个div包含一个图像。

• 所有DIV和图像都应该以相同的百分比收缩/增长，以填充flexbox的高度，这是通过使用flex-shrink和/或Flex-Grow实现的。
• 所有图像都应该保持其纵横比（即不拉伸），这是通过不设置其css“width”属性来实现的。
• 每个div的宽度应该与它内部的图像相同，我希望通过“width：min-content”或“width：max-content”或“width：fit-content”来实现，但这不起作用。

第三点怎么做到？

注意：它似乎可以在Flexbox之外工作。

在下面的示例中，当id为“ImageContainer”的div的高度缩小到flex-basis以下时，它的宽度不会减小，即使它的内容的宽度减小了。然而，在flexbox外部拥有相同的div，当它通过高度约束强制其子图像变小时，它可以正确地减小其宽度。

我如何使flexbox中的“ImageContainer”div随图像缩放其宽度（使第一个示例中的红色div与第三个示例中的红色div具有相同的大小）？

null

Image in flex container with limited height
<div style="display: flex; flex-direction: column; border: 1px solid black; height: 110px; width: 200px; align-items: flex-start;">
  <div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 150px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content;">
    <img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
  </div>
</div>

Original image<br />
<img src="https://via.placeholder.com/150.png" style="border: 1px solid black;" />

<br />
Image in just a simple div with limited height
<div style="position: relative; height: 110px; border: 1px solid red; width: min-content;">
  <img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
</div>

null

基于下面的答案之一，这是一个解决了Chrome上的问题，但在Firefox上不起作用的版本。与上面的示例相比，使其工作的唯一重要变化是在“ImageContainer”div上添加“height：100%”。

null

Image in flex container with limited height
<div style="display: flex; flex-direction: column; border: 1px solid black; height: 110px; width: 200px; align-items: flex-start;">
  <div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 120px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content; height: 100%;">
    <img src="https://via.placeholder.com/120.png" style="max-height: 120px; height: 100%;" />
  </div>
  <div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 150px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: fit-content; height: 100%;">
    <img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
  </div>
</div>

Original image<br />
<img src="https://via.placeholder.com/150.png" style="border: 1px solid black;" />

<br />
Image in just a simple div with limited height
<div style="posithtml" target="_blank">ion: relative; height: 110px; border: 1px solid red; width: min-content;">
  <img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
</div>

null

根据接受的答案，以上示例的解决方案如下（根据本应作为弹性基础的值计算高度百分比）：

null

Image in flex container with limited height
<div style="border: 1px solid black; height: 110px; width: 200px;">
  <div id="imagecontainer" style="box-sizing: border-box; border: 1px solid red;height: calc(100% / (270 / 120)); width: max-content;">
    <img src="https://via.placeholder.com/120.png" style="height: 100%;" />
  </div>
  <div id="imagecontainer" style="box-sizing: border-box; border: 1px solid red;height: calc(100% / (270 / 150)); width: max-content;">
    <img src="https://via.placeholder.com/150.png" style="height: 100%;" />
  </div>
</div>

null

请注意，这不再需要flexbox。

Answer 1

如果为#imageContainer设置max-height:calc(100%/（总高度/自身高度）)和height:100%，它也可以在Firefox上工作。相关答案

null

Image in flex container with limited height
<div style="display: flex; flex-direction: column; border: 1px solid black; height: 110px; width: 200px; align-items: flex-start; ">
  <div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 120px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content; max-height: calc(100% / (270 / 120));height: 100%;">
    <img src="https://via.placeholder.com/120.png" style=" height: 100%;" />
  </div>
  <div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 150px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: fit-content; max-height: calc(100% / (270 / 150));height: 100%;">
    <img src="https://via.placeholder.com/150.png" style=" height: 100%;" />
  </div>
</div>

Original image<br />
<img src="https://via.placeholder.com/150.png" style="border: 1px solid black;" />

<br />
Image in just a simple div with limited height
<div style="position: relative; height: 110px; border: 1px solid red; width: min-content;">
  <img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
</div>