[英]Flex items overlapping in Chrome and IE11
我正在尝试创建一个固定高度的flexbox布局,当内部内容太大时,它会滚动内部内容。
此外,如果内容不会导致滚动,我想修复带有按钮的div到容器的底部。
我有一个在Firefox中完美运行的布局,但在Chrome中,当它足够大以引起滚动时,它会导致底部按钮div在内容之上剪辑。
这是Firefox中正确的布局呈现:
这是它在Chrome中呈现不正确的方式:
此外,如果没有足够的内部内容来导致滚动,它应该如何表现:
.container { height: 150px; width: 300px; display: flex; flex-direction: column; overflow-y: auto; border: 1px solid #000; padding: 4px; } .options { display: flex; flex-direction: row; flex-wrap: wrap; } .spacer { flex: 1 1 auto; } .buttons { display: flex; flex-direction: row; justify-content: space-between; }
<div class="container"> <div class="options"> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> </div> <div class="spacer"></div> <div class="buttons"> <input type="button" value="Cancel"> <input type="button" value="Save"> </div> </div>
将其添加到您的代码中:
.container > * {
flex-shrink: 0;
}
根据flexbox规范 ,flex项目的初始设置应该是flex-shrink:1 。 这意味着允许flex项目缩小以避免容器溢出。
Chrome和IE11似乎符合此指南。
其他浏览器,如Firefox,边缘和Safari, 似乎有flex-shrink
设置为0
默认。
另一方面,这可能与flex-shrink
很少或没有关系。 该问题可能与弹性项目的默认min-height
和min-width
设置有关。 (请参阅此处: 为什么弹性项目不会缩小内容大小? )
或者它可能是两者的结合。 这真的取决于浏览器。
事实是,浏览器的实现各不相同。 这就是你必须测试的原因。
规格初始设置并不完全可靠,因为
干预是指用户代理决定稍微偏离标准化行为以提供极大增强的用户体验。
换句话说,浏览器会自行提供它认为最适合其用户的设置,而不管规范指南如何。
Chrome似乎做了很多这样的事情。 这里有些例子:
有一件事是肯定的:如果你禁用flex-shrink
,那么你的布局适用于所有浏览器。 将其添加到您的代码中:
.container > * {
flex-shrink: 0;
}
.container>* { flex-shrink: 0; } .container { height: 150px; width: 300px; display: flex; flex-direction: column; overflow-y: auto; border: 1px solid #000; padding: 4px; } .options { display: flex; flex-direction: row; flex-wrap: wrap; } .buttons { display: flex; flex-direction: row; justify-content: space-between; margin-top: 10px; /* new; for demo only */ }
<div class="container"> <div class="options"> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> </div> <div class="buttons"> <input type="button" value="Cancel"> <input type="button" value="Save"> </div> </div>
您可能还想考虑仅将滚动条移动到选项框,然后您真正将按钮固定到屏幕底部。 对您的代码进行此调整:
.container {
height: 150px;
width: 300px;
display: flex;
flex-direction: column;
/* overflow-y: auto; */
border: 1px solid #000;
padding: 4px;
}
.options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow-y: auto; /* NEW */
flex: 1; /* NEW; may be necessary for overflow to work in some browsers */
}
.container > * { flex-shrink: 0; } .container { height: 150px; width: 300px; display: flex; flex-direction: column; /* overflow-y: auto; */ border: 1px solid #000; padding: 4px; } .options { display: flex; flex-direction: row; flex-wrap: wrap; overflow-y: auto; /* NEW */ flex: 1; /* NEW; may be necessary for overflow to work in some browsers */ } .buttons { display: flex; flex-direction: row; justify-content: space-between; margin-top: 10px; /* new; for demo only */ }
<div class="container"> <div class="options"> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> </div> <div class="buttons"> <input type="button" value="Cancel"> <input type="button" value="Save"> </div> </div>
另外,我删除了你的间隔元素。 当有多种干净的方法在Flex容器中的项目之间创建空间时,似乎没有必要。
.container
并不需要“柔性”,一个min-height
财产.options
可能是不够的:
.container { height: 150px; width: 300px; /*display: flex;*/ flex-direction: column; overflow-y: auto; border: 1px solid #000; padding: 4px; } .options { display: flex; flex-direction: row; flex-wrap: wrap; min-height: 125px; } .options > div { display: inline-block; } .spacer { flex: 1 1 auto; } .buttons { display: flex; flex-direction: row; justify-content: space-between; }
<div class="container"> <div class="options"> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> <div class="option"> <input type="checkbox"> Option </div> </div> <div class="spacer"></div> <div class="buttons"> <input type="button" value="Cancel"> <input type="button" value="Save"> </div> </div>
这实际上与flex无关。 你看到的是溢出它的容器的选项( <div class="options">
元素)。 元素本身具有正确的大小,但容器本身是固定的高度。 如果添加overflow: hidden
或overflow: scroll
到.options
,它将按预期呈现(尽管您可能不希望滚动条存在)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.