scrollbar with image in flexbox [duplicate]

This question already has an answer here:

Why don't flex items shrink past content size?

1 answer

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!

edited Nov 15 '18 at 19:04

rawnewdlz

618718

asked Nov 15 '18 at 15:35

okp

marked as duplicate by Community♦ Nov 16 '18 at 15:05

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

This question already has an answer here:

Why don't flex items shrink past content size?

1 answer

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!

edited Nov 15 '18 at 19:04

rawnewdlz

618718

asked Nov 15 '18 at 15:35

okp

marked as duplicate by Community♦ Nov 16 '18 at 15:05

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

This question already has an answer here:

Why don't flex items shrink past content size?

1 answer

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!

edited Nov 15 '18 at 19:04

rawnewdlz

618718

asked Nov 15 '18 at 15:35

okp

This question already has an answer here:

Why don't flex items shrink past content size?

1 answer

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!

This question already has an answer here:

Why don't flex items shrink past content size?

1 answer

html css flexbox scrollbar

edited Nov 15 '18 at 19:04

rawnewdlz

618718

asked Nov 15 '18 at 15:35

okp

edited Nov 15 '18 at 19:04

rawnewdlz

618718

asked Nov 15 '18 at 15:35

okp

edited Nov 15 '18 at 19:04

rawnewdlz

618718

edited Nov 15 '18 at 19:04

rawnewdlz

618718

edited Nov 15 '18 at 19:04

rawnewdlz

618718

asked Nov 15 '18 at 15:35

okp

asked Nov 15 '18 at 15:35

okp

asked Nov 15 '18 at 15:35

okp

marked as duplicate by Community♦ Nov 16 '18 at 15:05

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by Community♦ Nov 16 '18 at 15:05

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

1 Answer
1

active

oldest

votes

A quick fix for the unexpected behaviour is to add:

  overflow-y: hidden;

answered Nov 15 '18 at 15:41

Fabian Hinsenkamp

1716

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 8:38

1

@okp As I tried to tell you in my comment, you can find all the documentation to your problem here: stackoverflow.com/questions/36247140/… -->. 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

|
show 1 more comment

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

A quick fix for the unexpected behaviour is to add:

  overflow-y: hidden;

answered Nov 15 '18 at 15:41

Fabian Hinsenkamp

1716

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 8:38

1

@okp As I tried to tell you in my comment, you can find all the documentation to your problem here: stackoverflow.com/questions/36247140/… -->. 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

|
show 1 more comment

A quick fix for the unexpected behaviour is to add:

  overflow-y: hidden;

answered Nov 15 '18 at 15:41

Fabian Hinsenkamp

1716

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 8:38

1

@okp As I tried to tell you in my comment, you can find all the documentation to your problem here: stackoverflow.com/questions/36247140/… -->. 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

|
show 1 more comment

A quick fix for the unexpected behaviour is to add:

  overflow-y: hidden;

answered Nov 15 '18 at 15:41

Fabian Hinsenkamp

1716

A quick fix for the unexpected behaviour is to add:

  overflow-y: hidden;

answered Nov 15 '18 at 15:41

Fabian Hinsenkamp

1716

answered Nov 15 '18 at 15:41

Fabian Hinsenkamp

1716

answered Nov 15 '18 at 15:41

Fabian Hinsenkamp

1716

answered Nov 15 '18 at 15:41

Fabian Hinsenkamp

1716

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 8:38

1

@okp As I tried to tell you in my comment, you can find all the documentation to your problem here: stackoverflow.com/questions/36247140/… -->. 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

|
show 1 more comment

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 8:38

1

@okp As I tried to tell you in my comment, you can find all the documentation to your problem here: stackoverflow.com/questions/36247140/… -->. 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

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

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

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 8:38

@okp As I tried to tell you in my comment, you can find all the documentation to your problem here: stackoverflow.com/questions/36247140/… -->. 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

|
show 1 more comment

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk