CODEWITHSUNDEEP
cssflexbox
Hauke P.
Hauke P.

Reputation: 2823

How to use flexbox to restrict height of image in flexbox row to available space?

Assuming I have a container with a fixed width and height that contains a flexbox like this:

#somecontainer {
  background-color: gray;
  
  position: absolute;
  left: 70px;
  top: 50px;
  height: 400px;
  width: 400px;
}

#content {
  background-color: green;
  
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  padding: 2em;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: stretch;
}

#content header {
  background-color: yellow;
  flex: 0 0 auto;
}

#content #imagecontainer {
  background-color: red;
  flex: 1 1 auto;
}

#content #descriptioncontainer {
  background-color: cyan;
  flex: 0 0 auto;
}
<div id="somecontainer">
  <div id="content">
    <header>Title</header>
    <div id="imagecontainer"><div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Tripod.svg/306px-Tripod.svg.png" alt="" /></div></div>
    <div id="descriptioncontainer">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  </div>
</div>

What do I have to do in order to make browsers reduce the height of the image in the second flex row so far that the remaining content will fit in the flexbox?

Upvotes: 0

Views: 95

Answers (1)

Paulie_D
Paulie_D

Reputation: 114989

I'm not sure why you have absolutely positioned items which are display:flex but, in general, these two properties don't mix so I've removed the majority of that styling.

That said, position:absolute is the answer here but only for the image.

I've also removed an unnecessary extra div wrapping the image

#somecontainer {
  background-color: gray;
  height: 400px;
  width: 400px;
  display: flex;
  flex-direction: column;
}
#content {
  background-color: green;
  padding: 2em;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: stretch;
}
#content header {
  background-color: yellow;
  flex: 0 0 auto;
}
#content #imagecontainer {
  background-color: red;
  flex: 1 1 auto;
  position: relative;
}
#content #imagecontainer img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  max-width: 100%;
  max-height: 100%;
}
#content #descriptioncontainer {
  background-color: cyan;
  flex: 0 0 auto;
}
<div id="somecontainer">
  <div id="content">
    <header>Title</header>
    <div id="imagecontainer">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Tripod.svg/306px-Tripod.svg.png" alt="" />
    </div>
    <div id="descriptioncontainer">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  </div>
</div>

Upvotes: 1

Related Questions