the picture of a boat keeps overflowing the parent, what do i do?

This is what I am trying to achieve

[![enter image description here](https://i.stack.imgur.com/OZSSz.png)](https://i.stack.imgur.com/OZSSz.png)

```css
.section-features {
    height: 100vh;
    display: flex;
    flex-direction: row; 
    margin:100px;

}

.van {   
    display: flex;
    flex-direction:column; 
    min-height: 0;
}
```

```html
<section class=section-features>   
            <img src="https://i.imgur.com/iMC3Mg6.jpg" alt="blue van on the road">
            <div class="van">   
                <img src="https://i.imgur.com/PMdn3Be.jpg" alt="sailboat on a beautiful blue water">
                <div class=feature>
                    <h2>feature</h2>
                    <p>Lorem ipsum dolor sit amet consectetur.</p>
                    <button><a href="#">Read More</a></button>
                </div>    
            </div>    
</section>
```