フレックスボックスの高さは、最初の列の内容に基づいて

Question

2つの等しい幅の列に分割された「パネル」を作成しようとしています。最初の列はテキストを含み、もう1つは画像を含みます。画像は大きく、右側を覆うように縮小する必要があります。パネルの高さは、左側のテキストの量に従う必要があります。

これは、それはそれは完全にそのコンテナを埋めるように画像がobject-fit: cover;を使用している、どのように見えるかですが、私は.panelにmax-height: 200px;を持っている必要はありません。

これはどういうわけか（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>