Problem with 100vh in Google Chrome

HTML-CSS
1

Hi, does anyone know how to fix it in Google Chrome (Edge as well)? The container should keep image and figcaption visible. Seems it doesn’t work properly when the image is taller than the screen size. This is not the case described under this link Problem with height: 100vh. Help needed

section#post .img_container {
    grid-area: img;
}

section#post .img_container .img_wrapper{
    height: 100vh;
    display: flex;
}

section#post .img_container .img_wrapper img{
    height: 100%;
    object-fit: cover;
}

section#post .gallery figcaption {
    font-size: 1.3rem;
    padding: calc(var(--margin_identation) / 2) 0;
    margin: 0 var(--margin_identation) calc(var(--margin_identation) * 2) var(--margin_identation)
}

<div class="img_container">
                    <div class="img_wrapper">
                        <figure class="gallery">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Eiffel_Tower_Vertical.JPG"/>
                            <!-- <img src="https://3.img-dpreview.com/files/p/TS600x450~sample_galleries/1876772280/5822001978.jpg"/> -->
                            <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur inventore, at architecto maxime tenetur possimus, adipisci culpa sint nesciunt molestiae cum, magni a expedita modi quam atque! Libero repellendus, provident accusamus explicabo. Sit, doloremque nesciunt et aut quisquam, sint perferendis cumque qui repudiandae nobis adipisci atque quod nisi sapiente doloribus repellendus</figcaption>
                        </figure>
                    </div>
                </div>

height
height1545×1093 138 KB

2

I’m a little confused here. All of your CSS rules reference a section tag but I don’t see a <section> in your HTML. So your CSS is basically doing nothing in this case.

Perhaps there is a <section> in your project and you just didn’t give us enough HTML in what you posted above? The best thing would be to give us a link to your project.

3

No problem. Please see the minimal code. Hope it helps.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.