CODEWITHSUNDEEP
css
Eggon
Eggon

Reputation: 2356

Adding <img> inside flex item causes the flex item to expand despite the image being small enough to fit inside

Using flexbox I am trying to achieve a "header-contents-footer" pattern with an image inside the contents section. The pattern works as expected until I put the image in the middle contents section. After adding the image the contents section expands pushing the footer out of viewport despite the fact that the image has a max-height property set that makes it small enough to not overflow its parent container and there's empty space left. Moreover, displayed image size seems to have no effect at all on the amount of space by which the footer is pushed away. The footer is offset by the same distance (roughly the height of the footer/header + a few pixels) regardless if the image's max-height is set to 10%, 50% or 80% (but it does affect image size displayed!). If I replace the image with plain text divs it also works as intended, just the image makes the push.

What can be the cause and how to fix it?

HTML:

  <div class="root">
        <h2>HEADER</h2>
        <div class="contents-container">
            <img src="someImage.png" alt="" class="tutorial__image"/> // if this is removed pattern works fine
        </div>
        <h2>FOOTER</h2>
  </div>

CSS (SCSS syntax):

 .root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    h2 {
      height: 4rem;
      margin: 0;
    }
  }
  .contents-container {
    width: 100%;
    height: 100%;
    flex-grow: 1;
  }
  .tutorial__image {
    max-height: 50%; // this is low enough to leave empty space in the container. However lower/higher setting doesn't change the footer offset
    max-width: 100%;
  }

This is part of Vue app and I'm using scss, but I doubt this is of significance. I'd appreciate any help.

Upvotes: 1

Views: 425

Answers (1)

Janitha Rasanga
Janitha Rasanga

Reputation: 1126

We can avoid that issue adding image using css/scss. Try this

html

<div class="contents-container backg-img">
    //your content
</div>

scss

.backg-img {
  background-image: url("image.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat;
}

Upvotes: 1

Related Questions