How to prevent flex child from overflowing the parent

Question

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

This is what I am trying to achieve

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

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

<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>

Nadine Thery · Answer 1 · 2019-09-29T21:18:27.467

You must create a structure that allows you this nesting:

Main section divided in 2 halves
Left half is for the van img
Right half is another div, with 2 halves: one for the img and another one for the features.

This can be done with flexbox. But you must remember that flexbox is a single-axis based method, so you can only arrange items in one direction. If you want to make two directions, like the case, then you must nest the items.

I think that CSS grid would make it easier for you in this case. However, I think this is the structure you need for flexbox to work in your arrange:

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

All these sections should have the "display: flex" property. But the right panel must be "flex-direction: column".

Also, apply the "overflow: hidden" property to the divs containing the images in order to avoid the images to overflow the div. However, even though you apply this, the img will push the real div dimensions, so I suggest cropping the image to the actualy size you want or applying a max-height property to prevent it from pushing the div size further that you want.

CSS:

section {
    display: flex;
    flex-direction: row;
}

.section-features {
    height: 100vh;
    display: flex;
    direction: row;
    margin: 100px;
    overflow: hidden;
    border-style: solid;

}

.sea-img {
    width: 100%;
    margin: 0;
    overflow: hidden;
}


.right-panel {
    margin: 0 0 0 15px;
    height: 100%;
}

score 0 · Accepted Answer · answered Nov 08 '19 at 15:05

0

I just had to add img {width:100%} at the beginning of css

answered Nov 08 '19 at 15:05

Ermek Barmashev

9
2

How to prevent flex child from overflowing the parent

2 Answers2