Flex 项目在 Chrome 和 IE11 中重叠

2023-11-24

我正在尝试创建一个固定高度的 Flexbox 布局，当内部内容太大时，它会滚动内部内容。

另外，如果内容不会导致滚动，我想修复一个带有按钮的 div 到容器底部。

我有一个在 Firefox 中完美运行的布局，但在 Chrome 中，当底部按钮 div 大到足以导致滚动时，它会导致底部按钮 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>

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

Solution

将其添加到您的代码中：

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

解释

弹性项目的初始设置，根据弹性盒规格，应该弯曲收缩：1。这意味着柔性物品可以收缩，以避免溢出容器。

Chrome 和 IE11 似乎遵守了这一准则。

其他浏览器，例如 Firefox、Edge 和 Safari，seem具有flex-shrink set to 0默认情况下。

另一方面，这可能与flex-shrink。该问题可能与默认值有关min-height and min-width弹性项目的设置。（看这里：为什么弹性项目不会缩小到超过内容大小？)

或者也许是两者的结合。这实际上取决于浏览器。

事实上，浏览器的实现各不相同。这就是为什么你必须进行测试。

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

浏览器代表可以做任何他们想做的事情的独立实体，并且
使用“干预措施”。

干预措施

干预是指当用户代理决定稍微偏离标准化的行为，以提供极大增强的用户体验经验。

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

Chrome 似乎经常这样做。这里有些例子：

为什么弹性项目不会缩小到超过内容大小？（参见浏览器渲染说明）
伪元素未在左上角对齐
Google Chrome 使用 Flexbox 视口锚定扩展方向
如何使图像保留在 CSS 网格容器的行中？
当父母没有定义身高时，为什么百分比身高对孩子起作用？

有一点是肯定的：如果你禁用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>

另外，我删除了您拥有的间隔元件。当有多种干净的方法可以在弹性容器中的项目之间创建空间时，这似乎没有必要。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

Flex 项目在 Chrome 和 IE11 中重叠的相关文章

从顶部开始在同一水平线上显示同一行中的两个 div

这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red
无法正确显示行

我应该在这个问题的开头说我完全没有 html css javascript 背景所以请对我宽容点如果我使用了错误的术语或者问了一个愚蠢的问题没有提供足够的信息请抱歉我正在尝试让一个可扩展的表工作通过阅读论坛线程教程将 nex
理解 z-index：该元素如何出现在其父级同级元素的前面？

为什么当我删除时红色 div 位于绿色 div 前面z index from wrapperRed 感觉像z index是沿着链条向上继承的如果我改变z index将绿色 div 更改为 6 即使删除第一句中描述的行后它仍保留在红色 d
古老的“字幕”标签的替代品？

marquee 标签的标准等效项是什么我正在寻找 HTML C asp NET 或 ASPX jquery java 脚本的解决方案 marquee 标签未包含在标准中因为它是视觉标签而不是语义标签因此您想要的任何语言都没
链接无效

我正在尝试使用以下命令创建一组指向页面中特定部分的链接 a href 符号但它似乎不起作用点击链接似乎没有任何反应right click gt open in a new tab更改 url 但不会移动到页面的其他部分我使用的是火狐浏
如何使自定义 Web 组件可聚焦？

我正在写一个自定义网络组件 https github com denilsonsa html5 knob这意味着是互动的我如何告诉浏览器这个自定义组件应该获得焦点我希望我的自定义元素可以聚焦通过选项卡导航集中注意力时可以接收按键信
使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

我是 html css 新手所以对以 html 格式显示的数据有疑问我有一个很长的列表我想将其拆分并以 html 格式显示为两个单独的列例如而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
VBA 完成 Internet 表单

我正在寻找将 Excel 中的值放入网页的代码 Sub FillInternetForm Dim IE As Object Set IE CreateObject InternetExplorer Application IE naviga
使用本地存储在从另一个表保存的 HTML TABLE 中打印 JSON，以便我在另一个页面上打印我的表

在我的作业中我必须使用用户输入中的数据并将数据保存在本地存储中我必须以水平表格式将这些数据从本地存储打印到其他页面为此我编写了用于用户输入并将数据保存在本地存储中的代码 div p p div
在 ember-cli 中安装 Foundation 5

我对 ember 相当陌生对构建工具也很陌生我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦并且对于团队工作来说非常糟糕我认为用 Bower 安装文件并使用会更好ember cli compass
将鼠标悬停在原点时会触发translateY()

当您将光标移动到按钮底部时是否可以无限期地不触发动画它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ
网站在 iPhone 屏幕右侧显示空白区域

我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白边框我在 stackoverflow 上研究了这个问题这些帖子是相关的但是当我尝试提供的各种解决方案时我无法
防止垃圾邮件按钮呼叫功能

如何防止调用函数时出现垃圾邮件按钮就像用户只能在按钮上每 1 秒调用一次该函数有办法做到吗因为我尝试了 setTimeout 但没有成功它仍然在发送垃圾邮件顺便说一句我使用 Jquery 这是我的代码
滚动时的 CSS 背景模糊

我有固定的背景图像滚动时我希望图像变得模糊我知道如何在 css 中进行模糊但在特定的滚动位置进行这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
固定 div 位于居中 div 旁边

我有一个网页其中有可滚动的内容此内容包含在 content 内位于页面的中心现在我希望导航栏出现在内容左侧 50 像素处该栏应具有固定位置不应滚动这是我到目前为止所尝试过的 nav position fixed top 50
两列表：一列尽可能小，另一列占据其余部分

我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
删除 IE9 边缘周围的 2px 灰色边框

我正在尝试对这个网站进行编码尝试关键字并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部至少顶部左侧和底部我的边距设置为零因此所有页面元素都到达页面的最边缘但使用 IE9 它们会停在这个灰色边框处我没
如何在模态打开时防止主体滚动

我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能防止模型打开时整个主体滚动我根据我的需要对原始脚本做
如何始终将焦点保持在文本框中

我创建了一个包含两个 div 的 HTML 页面左侧的 div 页面的 90 是 ajax 结果的目标右侧的 div 页面的 10 包含一个文本框该页面的想法是在文本框中输入零件编号通过条形码扫描仪并显示与该零件编号匹配的绘图显
Webpack 4：如何使用 LESS 获取 CSS 源映射？

多年来我一直在尝试让 CSS 源映射在 webpack 中工作但没有成功我不确定链条中哪里出了问题我希望有人能指出我正确的方向这是发生的事情行号是错误的实际上文件名也是错误的 main less只是包含一堆 import也就是说

随机推荐

如何将答案转换为小数点后两位

这是我的代码我想要的输出是txtA Text and txtB Text保留两位小数 Public Class Form1 Private Sub btncalc Click ByVal sender As System Object B
为什么 EF 5.x 对表使用复数名称？

我对 ORM 框架例如 Hibernate 甚至 Entity Framework 3 0 有一些经验默认情况下这些框架使用表的单数名称例如类 User 将映射到表 User 但是当我使用 Visual Studio 2012
使具有不可选取字段的对象可选取的正确方法是什么？

对我来说我所做的就是检测不可选取的内容并将其放入字符串中我想我也可以将其删除但随后它会错误地告诉我该字段不存在但我宁愿让它存在但成为字符串但我想知道是否有一种不那么老套更正式的方式来做到这一点我当前使用的代码 def make
Windows 上的 /usr/lib/ 相当于什么？

我正在创建一个依赖于 libxml2 的跨平台程序我不想在应用程序的 Windows 端口上使用 POSIX 环境例如 Cygwin 或 MSYS 我计划使用 Javascript Host for Windows 和 nmake 创建
Java 中的函数式数据结构

Java标准库是否有功能更新的功能数据结构例如不可变集列表等函数式java has 集合列表以及更多有趣的抽象
如何使用 Java 中的 ResultSet 获取行数？

我正在尝试创建一个简单的方法该方法接收 ResultSet 作为参数并返回一个包含 ResultSet 行数的 int 这是一种有效的方法吗 int size 0 try while rs next size catch Exceptio
在 matplotlib 中向辅助 y 轴添加 y 轴标签

我可以使用以下命令向左侧 y 轴添加标签plt ylabel 但如何将其添加到辅助 y 轴 table sql read frame query connection table 0 plot color colors 0 ylim 0 1
Android Studio 错误：无法翻译 setText 中的字符串文字

这是我的第一个应用程序我遇到了一些麻烦当我运行该应用程序时它崩溃了我不知道如何修复此错误 public class MainActivity extends AppCompatActivity TextView outputBott
创建“灵活”的 XML 模式

我需要为 XML 文件创建一个非常灵活的架构它必须满足以下要求验证我们需要存在的一些元素并了解其确切结构验证一些可选元素我们知道其确切结构允许任何其他元素以任意顺序允许它们快速示例 XML
蒙戈服务崩溃了。需要查找崩溃原因

今天早上我在我的服务器上发现 mongo 出现以下错误 System restart required You have mail ubuntu ip xxx xx xx xx mongo MongoDB shell version 2 4
Manifest.json 意外令牌

你好我将一个反应表达项目推到了heroku https polar oasis 57801 herokuapp com 并在控制台中收到以下错误 Chrome 控制台错误消息我尝试查找此错误似乎我需要更改 manifest json
将数组或列表传递给 @Pathvariable - Spring/Java

我正在 JBoss Spring 中做一个简单的获取我希望客户端在 url 中向我传递一个整数数组我如何在服务器上进行设置并显示客户端应该发送消息吗这就是我现在所拥有的 RequestMapping value test firs
multiprocessing.Manager 嵌套共享对象不适用于队列[重复]

这个问题在这里已经有答案了 Python 文档multiprocessing模块状态 3 6版本更改共享对象可以嵌套例如共享容器对象例如共享列表可以包含其他共享对象这些对象都将由共享容器对象管理和同步 SyncManager 这
在 JavaScript 中定义“嵌套”对象构造函数？

是否可以在另一个对象中定义一个对象我在想这样的事情 function MyObj name this name name function EmbeddedObj id this id id 然后我可以创建一个 EmbeddedObj 如
Rails 4 中的 form_for 参数数量错误

我正在使用 form for 标签它在 Rails 3 0 4 环境中工作但是当我尝试将项目更新到 Rails 4 时出现以下错误参数数量错误 3 对 2 这是我的代码尝试删除可能试图改变视图中的内容的内容就我而言问题在于cl
如何将计算列添加到我的 EF4 模型？

给定 MS SQL 2008 中的用户表和登录表 CREATE TABLE dbo User User UserID int IDENTITY 1000 1 NOT NULL UserName varchar 63 NOT NULL
如何解决读取问候语数据包时出现错误？

我正在尝试连接到 NetBeans 中的服务器我写的代码如下运行此代码会返回此错误 wlecome Warning mysqli connect MySQL server has gone away in C xampp htdocs
C 和 C++ 中的 static 和 extern 全局变量

我制作了 2 个项目第一个项目使用 C 语言第二个项目使用 C 语言两者都具有相同的行为 C项目 header h int varGlobal 7 main c include
在 C++ 中，如何在运行时获取给定元素的模板类型？

我正在设计一个简单的Array类能够保存任何类型的对象就像一个向量可以在一个对象中保存多种类型的数据这是为了学习目的我有一个名为的空基类Container class Container 还有一个名为的模板化子类Object temp
Flex 项目在 Chrome 和 IE11 中重叠

我正在尝试创建一个固定高度的 Flexbox 布局当内部内容太大时它会滚动内部内容另外如果内容不会导致滚动我想修复一个带有按钮的 div 到容器底部我有一个在 Firefox 中完美运行的布局但在 Chrome 中当底部按钮

Flex 项目在 Chrome 和 IE11 中重叠

Solution

解释

Flex 项目在 Chrome 和 IE11 中重叠 的相关文章

随机推荐

热门标签

Flex 项目在 Chrome 和 IE11 中重叠的相关文章