程序员经验分享-hwhale

Flexbox 溢出滚动条显示在主体而不是内部元素上

2023-11-26

问题：

在使用带有溢出的 Flexbox 的全尺寸应用布局（100% 宽度、100% 高度）中，在 Firefox、IE 或 Edge 中不会显示滚动条。它们在 Chrome 中确实显示正常。 FF/IE/Edge 中不是在元素上设置垂直滚动条，而是将滚动条应用于整个页面。

我尝试过的：

我已经尝试添加，正如其他几个答案中提到的那样，添加min-height: 0;到弹性元素/父级。我无法让这个解决方案发挥作用，但也许我做错了什么。

截图：

Chrome:

enter image description here

Firefox:

enter image description here

Example:

https://codepen.io/gunn4r/pen/WEoPjN

html {
  height: 100%;
}

.flex-grow {
  flex: 1;
}

.canvas-wrapper {
  overflow: scroll;
}

.canvas {
  width: 3000px;
  height: 3000px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<body class="h-100">
  <div class="h-100 container-fluid d-flex flex-column">

    <div class="row bg-warning">
      <div class="col-12 py-4">Top Bar</div>
    </div>

    <div class="row no-gutter flex-grow">

      <div class="col-9 px-0 d-flex flex-column">
        <div class="canvas-wrapper">
          <div class="canvas bg-success">
            Canvas
          </div>
        </div>
        <div class="bg-danger py-3">
          Canvas Footer
        </div>
      </div>

      <div class="col-3 bg-primary">
        <div class="sidebar-item">Sidebar</div>
      </div>

    </div>

    <div class="row bg-warning">
      <div class="col-12 py-2">Overall Footer</div>
    </div>

  </div>
</body>

看起来问题源于您的代码的这一部分：

.canvas-wrapper {
  overflow: scroll;
}

您希望该元素有滚动条。但是，该元素没有定义的高度。

From MDN:

为了overflow为了产生效果，块级容器 必须有一个设定的高度（height or max-height) or white-space set to nowrap.

Chrome 似乎并不关心高度要求。其他浏览器也是如此。

这应该足以使其跨​​浏览器工作：

.canvas-wrapper {
  overflow: scroll;
  flex: 1 0 1px;
}


html {
  height: 100%;
}

.flex-grow {
  flex: 1;
}

.canvas-wrapper {
  overflow: scroll;
  flex: 1 0 1px; /* NEW */
}

.canvas {
  width: 3000px;
  height: 3000px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="h-100">
  <div class="h-100 container-fluid d-flex flex-column">

    <div class="row bg-warning">
      <div class="col-12 py-4">Top Bar</div>
    </div>

    <div class="row no-gutter flex-grow">
      
      <div class="col-9 px-0 d-flex flex-column">
         <div class="canvas-wrapper">
             <div class="canvas bg-success">
               Canvas
           </div>
        </div>
        <div class="bg-danger py-3">
          Canvas Footer
        </div>
      </div>
      
      <div class="col-3 bg-primary">
        <div class="sidebar-item">Sidebar</div>
      </div>
      
    </div>

    <div class="row bg-warning">
      <div class="col-12 py-2">Overall Footer</div>
    </div>

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

html

css

Bootstrap4

flexbox

Overflow

Flexbox 溢出滚动条显示在主体而不是内部元素上 的相关文章

随机推荐

  • 无法将 Type 隐式转换为 My Type

    我不确定这是否是协方差和逆变问题 但我无法使其正常工作 这是代码 public interface IDto public class PaginatedDto

  • Brunch：分离供应商和应用程序 javascript

    我从我们的项目供应商和应用程序中制作了两个 javascript 包 我按照建议的方式执行此操作文档 如我的 brunch config js 中的这段代码所示 files javascripts joinTo js vendor js s

  • 如何在Android中像Wifi分析仪应用程序一样绘制图表？

    您好 我正在尝试开发一个现场测试应用程序 我必须检索相邻小区的信号强度等信息 所以我的问题是 如何显示具有不同相邻单元格的图表 X 轴和 Y 轴上的信号强度是实时的吗 一个例子here 我已经获得了 5 或 6 个相邻小区以及每个小区的信号

  • Mac OS X / iOS 中的正则表达式匹配表情符号

    Note 在不支持所包含表情符号的系统上 这个问题可能看起来很奇怪 这是一个后续问题如何从字符串中删除表情符号 我想构建一个正则表达式来匹配可以在 Mac OS X iOS 中输入的所有表情符号 明显的 Unicode 块涵盖了大部分表情符

  • 如何在 MVVM 中使用同一个 ViewModel 拥有多个视图？

    我对 WPF 和 MVVM 都很陌生 在尝试设置DataContext到两个单独视图中的 ViewModel 的同一实例 这是因为

  • 如何在 AngularJS 中关闭浏览器窗口

    我有一个登录表单作为单独的浏览器窗口弹出 一旦 API 验证用户已登录 我如何在 AngularJS 中关闭该登录浏览器窗口 Use window close in window服务 您可以像这样将结果广播到另一个控制器AngularJS

  • 是否可以捕获包含 Windows 7 DWM 缩略图的窗口？

    我开始相信你不能用 Windows API 做任何事 我有两个窗户 其中有一个 DWM 缩略图 我想要做的是 我希望能够将窗口屏幕的缩略图捕获到另一个窗口中 当我使用 bitblt 执行此操作时 除了缩略图之外的所有内容都会被复制 它只是位

  • 在android中画圆[关闭]

    很难说出这里问的是什么 这个问题模棱两可 含糊不清 不完整 过于宽泛或言辞激烈 无法以目前的形式合理回答 如需帮助澄清此问题以便重新打开 访问帮助中心 如何使用 Android SDK 在两点之间绘制圆 创建一个位图 然后在其画布上绘制 然

  • Postgresql base64 编码

    我需要将 db 值转换为 base64encode 我试过 select encode cast est name as text base64 from establishments 它显示错误 SQL select encode str

  • 在提交表单之前添加确认提醒

    我有一个表单允许用户从数据库中删除一些数据 我想要一些确认信息以防止意外删除 我想做以下事情 按下提交后 会弹出警告 您确定吗 如果用户点击 是 则运行脚本 如果用户点击 否 则不要提交脚本 如何才能做到这一点 我已经添加了 onSubmi

  • np.array() 和 np.asarray() 有什么区别？

    NumPy 和 NumPy 有什么区别np array and np asarray 我什么时候应该使用其中一种而不是另一种 它们似乎产生相同的输出 The 的定义asarray is def asarray a dtype None or

  • table-header-group 、 table-footer-group 属性在 Chrome 中不起作用

    这是我的代码 http furkan brove net syflm php 当我打印它时 它在 Chrome 中不起作用 我希望它在打印模式下将页眉和页脚放在每一页上 此外 在每个浏览器中 最后一个页脚位于内容的底部 但我希望它位于页面底

  • python中的完全单调插值

    我有一些数据 例如 我想拟合一条可微分的单调曲线 我试过PchipInterpolator类但在一个非常相似的图表上 结果是 这并不单调 如何将单调曲线拟合到这样的数据 以下是另一个类似图表的 y 值示例集 0 11091571190236

  • Xcode 6.3 两次构建所有 swift 文件

    我刚刚升级到 Xcode 6 3 并试图将编译时间减少到可管理的程度 我的项目中有大约 120 个 swift 文件 类 编译需要 2 3 分钟 我的项目还有两个测试目标 UnitTests and AutomatedTests Here

  • Django forms.DateInput 不应用 attrs 字段中给出的属性

    尝试通过 django 的 attrs 说明符应用时 占位符 类未设置表单 日期输入 表格是一个模型表单 并根据docs 采用与 TextInput 相同的参数 但多了一个可选参数 这是代码 widgets my date field fo

  • Javascript 中除法结果的四舍五入

    我正在 Javascript 中执行以下操作 0 0030 0 031 如何将结果四舍五入到任意位数 a 的最大数量是多少var将举行 现代浏览器应该支持一种称为toFixed 这是取自网络的例子 Example toFixed 2 whe

  • 裁剪和缩放 MTLTexture

    我可以创建一个新的吗MTLTexture尺寸w2 h2现有的MTLTexture region x1 y1 w1 h1 PS 我考虑过使用MTLTexture buffer makeTexture但偏移量需要是64字节 为什么 以下是您可以

  • 如何更改 joptionpane 的大小和字体？

    您可以更改 JOptionPane 文本的字体和大小吗 我尝试过 只有当我在该特定的 java 类上 运行文件 时它才有效 如果您启动整个项目 它不会更改字体 我只想更改特定的 JOptionPane 而不是全部 这是代码 UIManage

  • + 运算符如何用于合并委托？

    例如 delegate void SomeDelegate SomeDelegate a new SomeDelegate gt Console WriteLine A SomeDelegate b new SomeDelegate gt

  • Flexbox 溢出滚动条显示在主体而不是内部元素上

    问题 在使用带有溢出的 Flexbox 的全尺寸应用布局 100 宽度 100 高度 中 在 Firefox IE 或 Edge 中不会显示滚动条 它们在 Chrome 中确实显示正常 FF IE Edge 中不是在元素上设置垂直滚动条 而

热门标签