Question 294652 in Html Question posted in
Some basic documentation can be found here.

Html – Parent div expanding larger than child img node

I have a flex item, image-container, that contains an image:

<div class="container">
  <div class="image-container">
      <img class="image" src="image.jpg"></img>
  </div>
</div>

I want image-container and image to have equal width and height but I don’t want their height to exceed the height of the window so I tried the following CSS:

html,body,#root {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: start;
  height: 100%;

  background-color: orange;
  padding: 10px;
}

.image-container {
  display: flex;
  min-height: 0;

  background-color: blue;
}

The problem is image-container has a width that is much larger than image.

Codepen

Tags:

2

Answers


  1. 0

    One possible solution is setting the image container to inline-block and the image to block, optionally set a width to the image:

    .image-container {
  display: inline-block;
  background-color: blue;
}

.image {
  display: block;
  max-width: 100%;
  width: 250px;
}

    Fiddle

    Login or Signup to reply.
  2. 0

    Just remove min-height: 0; from .image-container
    and it will be fixed

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search