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 中重叠的相关文章

Sass 负变量值？

我有几个 scss 选择器其中我使用相同数量的正数和负数如下所示 padding 0 15px 15px margin 0 15px 20px 15px 我更喜欢对所有 15px 量使用一个变量但这不起作用 pad 15px padd
如何对 bootstrap-3 分页进行编程以处理简单的 HTML 内容

我正在新闻部分工作并尝试使用 jquery 使 bootstrap 3 分页工作分页的 HTML
Angular 和 Node JS 中的路由问题 [Angular]

我有角度js的问题我创建了 login html 和 home html 成功登录后我想将页面更改为 home html 我的路由不起作用默认 url 是 localhost angular 我尝试路由 realpath 即 local
jQuery能否获取未绘制的动态元素的大小

我的意思是如果我用 jQuery 和 DOM 创建一个 Element var MainHolder document createElement div addClass box 如果我打电话MainHolder width 如果不在窗口
带有旋转文本的垂直导航

我正在尝试实现一个包含链接的垂直导航菜单并且我已使用 css3 将链接文本旋转到 270 度我旋转了它因为我希望文本从下到上问题是当我添加顶部填充时间距不一致你可以看到我的代码here http jsbin com ravudu
确定使用 -webkit-line-clamp 表示多行省略号时是否显示省略号

我们使用多行 CSS 省略号https css tricks com line clampin https css tricks com line clampin 我们想要检测省略号是否正在显示并根据省略号是否正在显示来决定显示工具提示
调整离子卡中的图像大小

我想显示一组图像并在下面说明我选择使用 Ionic 卡我得到这个结果第一张图片虽然我想保留现在的相同布局并添加描述这是我的代码
电子邮件模板 - MS Office Outlook 365 中不显示表格背景图像

为了电子邮件模板的目的我需要在 table 它包含图像上的文本现在我已经尝试过 https stackoverflow com a 15620571 6191987 https stackoverflow com a 15620571
输入类型=“时间”超过24小时

我刚刚遇到以下问题在网络应用程序用户界面中我希望用户输入响应消息的时间范围以小时为单位时间范围应最长为 72 小时我们很乐意使用
如何在 jQuery 中使用 CSS“background-image”属性添加的图像上绑定单击事件

这是我的小提琴link http jsbin com otisur 1 edit 我想我的问题通过标题本身就很清楚了尽管如此我正在寻找一种绑定的方法click使用 css 添加的图像上的事件background image财产我知道
动态检测屏幕高度和屏幕宽度，以精简图像的高度和宽度

我以前可以display a div标签仅在portrait使用下面提到的代码corrl https stackoverflow com users 15388872 corrl in this https stackoverflow co
如何使用javascript隐藏div

我想使用 Javascript 隐藏一个 div 下面是我的div div class ui dialog titlebar ui widget header ui corner all ui helper clearfix span cl
更改文本框中一个字符的颜色 HTML/CSS [重复]

这个问题在这里已经有答案了我正在设计一个网站我想问一下大家如何通过CSS改变HTML文本框中字符串中的一个字符的颜色示例 STACK OVER FLOW 只是 A 字母是红色的你不能用常规方法做到这一点
在 Apache 服务器上将特定的 .htm 页面处理为 .php [重复]

这个问题在这里已经有答案了我正在为 Apache 服务器编程并且只需要将一个特定的 html 页面例如 first htm 作为 PHP 脚本进行处理可以设置吗 SetHandler http httpd apache org do
如何反转媒体查询中元素的顺序？

我有两个 div 左和右但是当屏幕小于 500px 时左 div 成为底部 div 右 div 成为顶部 div DOM 中的第一个 div 应该显示为第二个第二个 div 为第一个 I use display flex 然后 div
为 Gmail 设计 HTML 电子邮件

我正在生成一封使用内部样式表的 html 电子邮件即 h2 class foo Email content here 在 Gmail 中查看时内部样式表中的所有样式似乎都被忽略 Gmail 似乎忽略了内联规则以外的所有样式例如 h2
如何使用 HTML5 Javascript Canvas 获取三个碰撞形状的交集并删除不碰撞的部分？

我最近专门针对 KonvaJs 发布了类似的问题here https stackoverflow com questions 64603077 how can i get the intersection of three shapes c
CSS 字体在 Firefox 中不起作用

我下面有这个字体代码它在谷歌浏览器中工作正常但在火狐浏览器中根本不起作用为什么
如何在 Aframe 中的平面上加载 gif（具有透明度）（故障）？

大家好我是 Aframe 的新手正在尝试在空间网络环境中设置一大堆 gif 我在飞机上加载 gif 时遇到了一些困难我已经通过 Aframe 的资产文件夹加载了图像故障目前它看起来像这样
当td内容太宽时，表格溢出父div

我准备了一个 JSFiddle 来解释向你展示我的问题 http jsfiddle net nz96C http jsfiddle net nz96C 乍一看还不错但是当我添加一些文本时 firsttd一旦使用 tds 整个宽度整个表

随机推荐

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

这是我的代码我想要的输出是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 中重叠的相关文章