如何使用 flexbox 将 flexbox 行中的图像高度限制为可用 space？

Question

假设我有一个固定宽度和高度的容器，其中包含这样一个 flexbox：

#somecontainer {
  background-color: gray;
  
  position: absolute;
  left: 70px;
  top: 50px;
  height: 400px;
  width: 400px;
}

#content {
  background-color: green;
  
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  padding: 2em;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: stretch;
}

#content header {
  background-color: yellow;
  flex: 0 0 auto;
}

#content #imagecontainer {
  background-color: red;
  flex: 1 1 auto;
}

#content #descriptioncontainer {
  background-color: cyan;
  flex: 0 0 auto;
}

<div id="somecontainer">
  <div id="content">
    <header>Title</header>
    <div id="imagecontainer"><div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Tripod.svg/306px-Tripod.svg.png" alt="" /></div></div>
    <div id="descriptioncontainer">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  </div>
</div>

为了使浏览器将第二个 flex 行中的图像高度降低到使剩余内容适合 flexbox，我必须做什么？

Answer 1

我不确定你为什么要绝对定位 display:flex 的项目，但一般来说，这两个属性不会混用，所以我删除了大部分样式。

也就是说，position:absolute 是此处的答案，但仅针对图像。

我还删除了不必要的额外 div 包装图片

#somecontainer {
  background-color: gray;
  height: 400px;
  width: 400px;
  display: flex;
  flex-direction: column;
}
#content {
  background-color: green;
  padding: 2em;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: stretch;
}
#content header {
  background-color: yellow;
  flex: 0 0 auto;
}
#content #imagecontainer {
  background-color: red;
  flex: 1 1 auto;
  position: relative;
}
#content #imagecontainer img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  max-width: 100%;
  max-height: 100%;
}
#content #descriptioncontainer {
  background-color: cyan;
  flex: 0 0 auto;
}

<div id="somecontainer">
  <div id="content">
    <header>Title</header>
    <div id="imagecontainer">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Tripod.svg/306px-Tripod.svg.png" alt="" />
    </div>
    <div id="descriptioncontainer">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  </div>
</div>

如何使用 flexbox 将 flexbox 行中的图像高度限制为可用 space？

How to use flexbox to restrict height of image in flexbox row to available space?

css

flexbox