Image overflows fixed-height flex container

1
votes

I'm using a fixed-height flex container to do the layout. In the container, there are three components: header, content, footer. I want to force the content to use the rest of the height (i.e. content height = fixed-height minus header and footer). In my content, it will include an image and some texts.

However, the image always overflows a fixed-height flex container even providing max-height: 100% to constrain the height, but I want to put header, content, and footer into a fixed flex container.

Does anyone know how to fix it?

code: https://codepen.io/mrchung402/pen/wvGPJxz

<div class="container">
  <div class="header">
     header
  </div>
  <div class="content"> 
    <div class="my-img">
      <img src="http://via.placeholder.com/274x295">
    </div>
    <div class="my-text">
      my-text
    </div>
  </div>
  <div class="footer">
    footer
  </div>
</div>


.container {
  border: solid 1px red;
  display: flex;
  max-width: 500px;
  height: 200px;
  flex-direction: column;
}
.header {
  flex: 0 0 auto;
  background: #A7E8D3;
}
.content {
  display: flex;
  flex-direction: column;
}
.footer {
  flex: 0 0 auto;
  background: #D7E8D4;
}
.my-img {
  max-height: 100%;
  height: auto;
  max-width: 100%;
}

img {
  max-height: inherit;
  height: inherit;
}

.my-text {
  background: #C7A8D4;
}

img overflows flex item

1
htmlcssflexbox
.container{ height: 200px; }. What do you expect? – StackSlave
i expect header, content, and footer will not exceed the container – Wesley.Chung
Not if you want to fit your image in there too. – StackSlave
delete height: 100vh from .container. @StackSlave told you right. – s.kuznetsov
what i want is to put all flex items into a flex container with heights: 200px – Wesley.Chung

1 Answers

1
votes

Instead of styling .my-img you should style .my-img img

.my-img img{
  height: 100%;
  width: 100%;
}