0

i'm getting an unexpected vertical scrollbar when resizing the window when I have an image in a flexbox container. The image has a max-width and max-height in a flex:1 column flexbox container. All is good in some window ratios, but if the window is small in height, I get a vertical scrollbar, with some blank space under the image.

Any ideas why?

CSS

body{
    display:flex;
    flex-direction:column;
    margin:0;
    height:100vh;
}
#cont{
    flex:1;
}
#cont img{
    max-width:80%;
  max-height:80%;
}

HTML

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="cont">
    <img src="https://c1.staticflickr.com/3/2547/4011378891_ca862aeb8f_b.jpg" />
  </div>
</body>
</html>

Here is a fiddle to illustrate: https://jsfiddle.net/sym8qb4t/

Resize the window in height and a scollbar will appear at some point.

Thanks!

rawnewdlz
  • 1,221
  • 1
  • 17
  • 24
okp
  • 13
  • 2
  • 5

1 Answers1

0

A quick fix for the unexpected behaviour is to add: 

  overflow-y: hidden;
Fabian Hinsenkamp
  • 302
  • 1
  • 8
  • yeah thanks this solution crossed my mind but it doesn't explain why I get that scrollbar in the first place... Looks like a dirty fix to me (effective, but dirty...) Plus it doesn't solve that white space under the image. – okp Nov 15 '18 at 15:43
  • 1
    What do you want to achieve exactly? Have an image always covering 80% of the available viewport? – Fabian Hinsenkamp Nov 15 '18 at 15:53
  • 1
    By bad for the comment about blank space with this overflow:hidden fix, it "solves" the issue. I upvote your answer, even if I still don't understand the behavior. – okp Nov 16 '18 at 08:38
  • 1
    @okp As I tried to tell you in my comment, you can find all the documentation to your problem here: https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size -->. The solution is to add `min-height:0;` to your `#cont` div. – ReSedano Nov 16 '18 at 11:20
  • @ReSedano sorry I missed your comment. Indeed, duplicate then. Thanks! – okp Nov 16 '18 at 15:04
  • @okp No problem. You're welcome! :-) – ReSedano Nov 16 '18 at 21:46