时间戳

首页 > 解决方案 > flexbox中带有图像的滚动条

html - flexbox中带有图像的滚动条

问题描述

当我在 flexbox 容器中有图像时，在调整窗口大小时出现意外的垂直滚动条。图像在 flex:1 列 flexbox 容器中具有最大宽度和最大高度。在某些窗口比例中一切都很好，但如果窗口高度很小，我会得到一个垂直滚动条，图像下方有一些空白区域。

任何想法为什么？

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>

这是一个小提琴来说明：https ://jsfiddle.net/sym8qb4t/

调整窗口的高度，在某个点会出现一个 scollbar。

谢谢！

标签： htmlcssflexboxscrollbar

解决方案

对意外行为的快速修复是添加：

  overflow-y: hidden;

推荐阅读