html – 在Chrome和IE11中重叠的Flex项目

概述我正在尝试创建一个固定高度的flexbox布局,当内部内容太大时,它会滚动内部内容. 此外,如果内容不会导致滚动,我想修复带有按钮的div到容器的底部. 我有一个在Firefox中完美运行的布局,但在Chrome中,当它足够大以引起滚动时,它会导致底部按钮div在内容之上剪辑. 这是Firefox中正确的布局呈现： 这是它在Chrome中呈现不正确的方式： 此外,如果没有足够的内部内容来导致滚动, 我正在尝试创建一个固定高度的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 >  <div >    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>  </div>  <div ></div>  <div >    <input type="button" value="Cancel">    <input type="button" value="Save">  </div></div>

https://jsfiddle.net/tdghqyuu/1/

解决方法 解

将其添加到您的代码中：

.container > * {  flex-shrink: 0; }

说明

根据flexbox specification,d性项目的初始设置应为flex-shrink: 1.这意味着允许d性项目缩小以避免容器溢出.

Chrome和IE11似乎符合此指南.

其他浏览器,如firefox,Edge和Safari,默认情况下灵活收缩设置为0.

另一方面,这可能与柔性收缩很少或没有关系.该问题可能与d性项目的默认最小高度和最小宽度设置有关. (见这里：Why don’t flex items shrink past content size?)

或者它可能是两者的结合.这真的取决于浏览器.

事实是,浏览器的实现各不相同.这就是你必须测试的原因.

规格初始设置并不完全可靠,因为

>浏览器代表可以做任何他们想做的事情的独立实体
>使用“干预”.

07003

An intervention is when a user agent decIDes to deviate slightly from
a standardized behavior in order to provIDe a greatly enhanced user
experIEnce.

换句话说,浏览器会自行提供它认为最适合其用户的设置,而不管规范指南如何.

Chrome似乎做了很多这样的事情.这里有些例子：

> Why don’t flex items shrink past content size?(参见浏览器渲染说明)
> 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?

有一件事是肯定的：如果你禁用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 >  <div >    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>  </div>  <div >    <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 >  <div >    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>    <div >      <input type="checkBox"> Option    </div>  </div>  <div >    <input type="button" value="Cancel">    <input type="button" value="Save">  </div></div>

另外,我删除了你的间隔元素.当有多种干净的方法在Flex容器中的项目之间创建空间时,似乎没有必要.

总结

以上是内存溢出为你收集整理的html – 在Chrome和IE11中重叠的Flex项目全部内容，希望文章能够帮你解决html – 在Chrome和IE11中重叠的Flex项目所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。