如何使用flexbox將flexbox行中的圖像高度限制爲可用空間？

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>