Высота 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>