Kevin Powell - Community•13mo ago

Adding image to a flex container overrides 100vh and creates a scroll bar. How to fix?

Hello, I have the following HTML. I want to present as a simple page with hero and footer taking up the entirety of the view port.

<body>
    <nav>
      <div class="nav-left">
        <img id="logo" src="img/cluck-yeah-logo.png" alt="Cluck Yeah! Logo">
        <h1>Cluck Yeah!</h1>
      </div>

      <div class="nav-right">
        <a href="menu.html">Menu</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
      </div>
    </nav>    
  
    <div class="hero">
      <img id="pic" src="img/index_image.jpg" alt="A delicious looking skewer, yummy.">
    </div>

    <footer>
        <p>Copyright © Cluck Yeah! 2023</p>
    </footer>

  </body>

<body>
    <nav>
      <div class="nav-left">
        <img id="logo" src="img/cluck-yeah-logo.png" alt="Cluck Yeah! Logo">
        <h1>Cluck Yeah!</h1>
      </div>

      <div class="nav-right">
        <a href="menu.html">Menu</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
      </div>
    </nav>    
  
    <div class="hero">
      <img id="pic" src="img/index_image.jpg" alt="A delicious looking skewer, yummy.">
    </div>

    <footer>
        <p>Copyright © Cluck Yeah! 2023</p>
    </footer>

  </body>

To do so, I used the following CSS:

body {
    background-color: #FFF5E0;
    color: #141E46;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

nav {
    background-color: #FF6969;
    display: flex;
    justify-content: space-between;
}

.nav-left {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
}
.nav-right {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 2rem;
    margin-right: 40px;
}

.hero {
    display: flex;
    justify-content: center;
    flex: 1;
    background-color: black;
}

#logo {
    height: 120px;
    width: 120px;
}

#pic {
    position: absolute
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%
    object-fit: cover;
}

body {
    background-color: #FFF5E0;
    color: #141E46;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

nav {
    background-color: #FF6969;
    display: flex;
    justify-content: space-between;
}

.nav-left {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
}
.nav-right {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 2rem;
    margin-right: 40px;
}

.hero {
    display: flex;
    justify-content: center;
    flex: 1;
    background-color: black;
}

#logo {
    height: 120px;
    width: 120px;
}

#pic {
    position: absolute
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%
    object-fit: cover;
}

The problem I am having is that when I comment out the image, the page displays as I would like. But when the image is added, it expands beyond the <div> container and creates a scrollbar. I want the image to grow to fit the container, but not to cause the container itself to grow. I have spent some time trying to figure it out, Google, ChatGPT but haven't found a solution - any help would be great! Thank you in advance, Bread

8 Replies

Jochem•13mo ago

it's easier to diagnose things if you share your code in something like codepen, so people can see the code live. That said, you can probably fix this with:

img {
  max-width: 100%;
}

img {
  max-width: 100%;
}

Bread•13mo ago

Ah thank you for the tip! My first post here. Here is a link to the Codepen: https://codepen.io/Datasapien/pen/PoVZMQY

Bradley Clayton

CodePen

Cluck Yeah!

...

Mannix•13mo ago

you are missing some ; in your css for a start

b1mind•13mo ago

https://youtu.be/veEqYQlfNx8?si=Gx3EO-S1YmWRNh1a

Kevin Powell

YouTube

The problems with viewport units

Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts Join the Discord: https://kevinpowell.co/discord Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...

b1mind•13mo ago

also you don't remove the default body margin

Bread•13mo ago

Oh yes, good catch, thank you! I've added them in, and now taken out the absolute positioning for the image as it was then ruining the layout completely haha. Thanks 🙂 Ah, from my first lines of CSS you mean? The * {} part? I will remove the margin: 0px now, but would you mind telling me why it is bad practice? Thank you btw 🙂

b1mind•13mo ago

Ah missed that, I don't do it but you do you. I embrace defaults and only overwrite it when needed. Long as you cleared it, but more know the pit falls of vh/vw units

Bread•13mo ago

Yeah I watched that video, really useful so thank you. I think I am using Display: flex too much for this page too, so I will try simplify a little. Thanks for the help 😄

Gaming

Programming

Adding image to a flex container overrides 100vh and creates a scroll bar. How to fix?