Chrome和IE11中的Flex项目重叠 [英] Flex items overlapping in Chrome and IE11
本文介绍了Chrome和IE11中的Flex项目重叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
另外，如果内容不是这样的话，那么我们就可以创建一个固定高度的flexbox布局来滚动内部内容。导致滚动我想修复一个带按钮的div到容器底部。
我有一个在Firefox中完美运行的布局，但是在Chrome中它会导致底部按钮div在足够大的滚动内容的情况下剪辑内容。
这是在Firefox中正确渲染的布局：
这是它在Chrome中呈现不当的方式：
此外，这是它应该如何表现没有足够的内容引起滚动：
.container {height：150px;宽度：300px;显示：flex; flex-direction：列;溢出-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类= 容器 > < div class =options> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < / DIV> < div class =spacer>< / div> < div class =buttons> < input type =buttonvalue =Cancel> < input type =buttonvalue =Save> < / div>< / div>
https://jsfiddle.net/tdghqyuu/1/
解决方案
解决方案
将此添加到您的代码中：
.container> * {
flex-shrink：0;
说明
弹性项目的初始设置，根据 flexbox规范，应该 flex-shrink：1 。这意味着Flex项目被允许缩小以避免容器溢出。
Chrome和IE11似乎遵守此准则。
其他浏览器（例如Firefox，Edge和Safari）似乎将 flex-shrink 设置为<$ c
另一方面，这可能与 flex有很少或根本没有关系-shrink 。问题可能与Flex项目上的默认 min-height 和 min-width 设置有关。 （请参阅：为什么不弹性项目缩小过去的内容大小？）
或者它可能是两者的组合。这实际上取决于浏览器。
事实上，浏览器实现有所不同。这就是为什么你必须测试。
规格初始设置并不完全可靠，因为
- 浏览器代表独立的实体，可以做任何他们想做的事情，并且
- 使用干预。
干预措施 p>
干预是指用户代理决定偏离
a标准化行为，以提供极大增强的用户
体验。
换句话说，无论规范如何，浏览器都会自行提供感觉最适合其用户的设置。
Chrome似乎做了很多。以下是一些示例：
- 为什么不' t flex items会缩小内容大小吗？（请参阅浏览器呈现说明）
- 伪元素不在左上角对齐
- Google Chrome浏览端口 - 锚定展开方向flexbox
- 如何让图片保留在CSS网格容器的行内？
- 为什么当父母没有定义身高时，百分比高度对孩子有效？
有一点可以确定：如果您禁用 flex-shrink ，然后您的布局适用于所有浏览器。将此添加到您的代码中：
.container> * {
flex-shrink：0;
}
<覆盖>
.container> * {flex-shrink：0;}。container {height：150px;宽度：300px;显示：flex; flex-direction：列;溢出-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; / *新;仅用于演示* /}
< div class =容器> < div class =options> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < / DIV> < div class =buttons> < input type =buttonvalue =Cancel> < input type =buttonvalue =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; / *新* /
flex：1; / * NEW;可能需要溢出才能在某些浏览器中工作* /
}
.container> * {flex-shrink：0;}。container {height：150px;宽度：300px;显示：flex; flex-direction：列; / * overflow-y：auto; * / border：1px solid＃000; padding：4px;}。options {display：flex; flex-direction：row; flex-wrap：wrap;溢出-y：auto; / * NEW * / flex：1; / * NEW;可能需要溢出才能在某些浏览器中工作* /}。 flex-direction：row; justify-content：space-between; margin-top：10px; / *新;仅用于演示* /}
< div class =容器> < div class =options> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < div class =option> <输入类型=复选框>选项< / div> < / DIV> < div class =buttons> < input type =buttonvalue =Cancel> < input type =buttonvalue =Save> < / div>< / div>
删除了你有的间隔元素。当有多种干净的方式在flex容器中的项目之间创建空间时，似乎没有必要。
I'm trying to create a flexbox layout of fixed height which scrolls the inner content when the inner content is too large.
Additionally if the content doesn't cause scrolling I want to fix a div with buttons to the bottom of the container.
I have a layout which works perfectly in Firefox but in Chrome it causes the bottom button div to clip on top of the content when it's large enough to cause scrolling.
This is the layout rendering properly in Firefox:
This is how it renders improperly in Chrome:
Additionally, this is how it should behave if there's not enough inner content to cause scrolling:
.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>
https://jsfiddle.net/tdghqyuu/1/
解决方案
Solution
Add this to your code:
.container > * {
flex-shrink: 0;
}
Explanation
An initial setting on flex items, according to the flexbox specification, should be flex-shrink: 1. This means that flex items are permitted to shrink in order to avoid overflowing the container.
Chrome and IE11 appear to be adhering to this guideline.
Other browsers, such as Firefox, Edge and Safari, seem to have flex-shrink set to 0 by default.
On the other hand, this may have little or nothing to do with flex-shrink. The problem may relate to the default min-height and min-width settings on flex items. (See here: Why don't flex items shrink past content size?)
Or maybe it's a combination of both. It really depends on the browser.
The fact is, browser implementations vary. That's why you have to test.
Spec initial settings are not entirely reliable because
- browsers represent independent entities that can do whatever they want, and
- the use of "interventions".
An intervention is when a user agent decides to deviate slightly from a standardized behavior in order to provide a greatly enhanced user experience.
In other words, a browser takes it upon itself to provide settings that it feels are best for its users, regardless of spec guidelines.
Chrome seems to do this a lot. Here are some examples:
- Why don't flex items shrink past content size? (see browser rendering notes)
- pseudo element not aligning at top left corner
- Google Chrome viewport-anchored expand direction with flexbox
- How to make images stay within the rows of a css grid container?
- Why are percentage heights working on children when the parent has no height defined?
One thing appears certain: If you disable flex-shrink, your layout then works across all browsers. Add this to your code:
.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>
You may also want to consider moving the scrollbar to the options box only, then you've truly fixed the buttons to the bottom of the screen. Make this adjustment to your code:
.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>
Also, I removed the spacer element you had. It doesn't seem necessary when there are a multitude of clean ways to create space between items in a flex container.
这篇关于Chrome和IE11中的Flex项目重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
