让图像占据改变大小的 div 的全部高度？

Question

I will try to make this sound as easy as possible.

I am trying to place 2 div containers, side by side, and have them be the same height at all times.

The right div will be regular text. The amount of text in here will vary since I plan on using this for different pages.

The left div will be composed of 2 smaller containers - a title block, and an image block beneath it.

Here is a visual example of what I'm trying to achieve. The green box is supposed to be the full photo

Example Photo

---

I would like the photo in the image block of the left side to take up the full height/width of the box - (similar to background-position: cover that is used in CSS). I'd prefer to use a regular img tag instead of setting it as a div background.

---

The issue that I am having is that the image height on the left takes priority over the text box on the right hand side, and causes both containers to appear much longer than I want. I want the text block on the right to be prioritized, and the image block changes height based on that.

I've tried using object-fit: contain, but it isn't working, unfortunately. The closest I've gotten is to use width: 100%, but then it makes the height way too big.

Here's what I have so far:

 .main { display: flex; }.main.left { width: 40%; float: left; }.main.left.title { background-color: black; text-align: center; display: block; height: 90px; padding: 50px; color: white; font-size: 40px; }.photo { height: auto; width: 100%; }.photo img { width: 100%; }.main.right { width: 60%; float: right; }

 <div class="main"> <div class="left"> <div class="title">This is my Title</div> <div class="photo"><img src="https://image.shutterstock.com/z/stock-photo-pastoral-green-field-with-long-shadows-in-tuscany-italy-275372477.jpg"></div> </div> <div class="right"> <p>text goes here lalalalalala</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>

Answer 1

<style> 
.main {
    display: flex;
    }

.main .left {
    width: 40%;
    display: flex;
    flex-direction: column;
    }

.main .left .title {
    background-color: black;
    text-align: center;
    display: block; 
    height: 90px;
    padding: 50px;
    color: white;
    font-size: 40px;
}
.photo {
    width: 100%;
    overflow: hidden;
    position: relative;
    flex-grow: 1;
    }

.photo img {
    width: 100%;
    position: absolute;
    }

.main .right {
    width: 60%;
    }
</style>

Notes:

• I made the image absolutely positioned so its own height won't stretch our flex row.
• The image is being cropped by height. If the title is taller than the text (or the same height), you won't see the image at all.
• I made the left column also display flex and the photo box flex grow so that the title can stay the same height and the photo box will stretch the rest of the way to match the right column.
• We don't need float left/right for flex items.