flexbox高度根據第一列的內容

Question

我試圖創建一個「面板」，它分爲兩個等寬的列，第一個包含文本，第二個圖像。圖像很大，應該縮小以覆蓋右側。面板的高度應該跟隨左側文本的數量。

這是它應該是什麼樣子，該圖像是使用object-fit: cover;使其完全填滿它的容器，但我不希望有max-height: 200px;上.panel。

這是可能以某種方式（最好不使用JavaScript）？

.panel { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    background-color: red; 
 

 
    /* I want this to be flexible based on text in panelText */ 
 
    /*max-height: 200px;*/ 
 
    
 
} 
 
.panel .panelText { 
 
    padding: 1em; 
 
    flex: 1; 
 
    width: 50%; 
 
    background-color: black; 
 
    color: white; 
 
} 
 
.panel .panelImage { 
 
    object-fit: cover; 
 
    width: 50%; 
 
}

<section class="panel"> 
 
    <div class="panelText"> 
 
    <h3>This is a header</h3> 
 

 
    <ul> 
 
     <li>One one one</li> 
 
     <li>Two two two</li> 
 
     <li>Three three three</li> 
 
     <li>Four four four</li> 
 
    </ul> 
 

 
    <p>Now we're at the end</p> 
 
    </div> 
 

 
    <img class="panelImage" src="https://placebear.com/1000/1000" /> 
 

 
</section>

Answer 1

這是可能的，但你不應該讓圖像決定有關其容器的尺寸 - 使它position: absolute。 Flex容器將始終適應最大的元素，因此object-fit: cover在這裏毫無意義。

另外，我會推薦這個，使用圖像作爲div的背景圖像（如果它是可行的在您的網站設置）。這裏

解決方案一：

.panel { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    background-color: red;  
 
} 
 
.panel .panelText { 
 
    padding: 1em; 
 
    flex: 1; 
 
    width: 50%; 
 
    background-color: black; 
 
    color: white; 
 
} 
 
.panel .panelImage { 
 
    position: absolute; 
 
    height: auto; 
 
    width: 100%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 
.panel .image-wrapper { 
 
    position: relative; 
 
    width: 50%; 
 
    overflow: hidden; 
 
}

<section class="panel"> 
 
    <div class="panelText"> 
 
    <h3>This is a header</h3> 
 

 
    <ul> 
 
     <li>One one one</li> 
 
     <li>Two two two</li> 
 
     <li>Three three three</li> 
 
     <li>Four four four</li> 
 
    </ul> 
 

 
    <p>Now we're at the end</p> 
 
    </div> 
 
    <div class="image-wrapper"> 
 
    <img class="panelImage" src="https://placebear.com/1000/1000" /> 
 
    </div> 
 
</section>

二的解決方案 - 背景圖片：

.panel { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    background-color: red;  
 
} 
 
.panel .panelText { 
 
    padding: 1em; 
 
    flex: 1; 
 
    width: 50%; 
 
    background-color: black; 
 
    color: white; 
 
} 
 
.panel .image { 
 
    width: 50%; 
 
    background-image: url('https://placebear.com/1000/1000'); 
 
    background-size: cover; 
 
    background-position: center center; 
 
}

<section class="panel"> 
 
    <div class="panelText"> 
 
    <h3>This is a header</h3> 
 

 
    <ul> 
 
     <li>One one one</li> 
 
     <li>Two two two</li> 
 
     <li>Three three three</li> 
 
     <li>Four four four</li> 
 
    </ul> 
 

 
    <p>Now we're at the end</p> 
 
    </div> 
 
    <div class="image"> 
 
    </div> 
 
</section>