Bread Posts - Answer Overflow

Bread

•Created by Bread on 10/29/2023 in #front-end

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

11 replies

Gaming

Programming