嵌套弹性盒高度与最大高度

2024-02-06

update：我在 Chrome 72 上看到这种奇怪的行为。FireFox 64 没问题！

我对嵌套弹性盒有疑问。

在下面的代码片段中，我添加了一个虚拟 XL 高度.root.container，这样当有很多的时候结果正是我想要的items溢出可用的最大高度。

反之，当数量很少时items, the .root.container不应延伸至所有可用高度。

换句话说，我想要.root.container高度为auto，但我不知道如何。
删除其虚拟高度，溢出被触发.root.content代替.sub.content.

请帮助我了解 Flexbox 在这种特殊情况下的工作原理。

附：小提琴也可用here https://jsfiddle.net/3y70gum2/

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

div {
  padding: 10px;
}

.container {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  max-height: 100%;
  overflow: auto;
}

.root.container {
  background-color: red;
  max-height: 100%;
  height: 999999px; /* i want height to be 'auto' */
}

.sub.container {
  background-color: purple;
  height: 100%;
}

.root.header {
  background-color: lightblue;
}

.sub.header {
  background-color: lightgreen;
}

.root.content {
  background-color: yellow;
}

.sub.content {
  background-color: orange;
}

<div class="root container">
  <div class="root header">header</div>
  <div class="root content">
    <div class="sub container">
      <div class="sub header">menu</div>
      <div class="sub content">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Your code is working as expected when setting the big height because max-height:100% in the child element need a reference https://stackoverflow.com/q/1622027/8620333, if you remove the height the max-height will fail to auto. As a side note, Firefox will have the same output even if you remove max-height so the issue isn't related to max-height. ¹

相反，您可以保留级联弹性容器并依靠默认的拉伸对齐来获得您想要的内容：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

div {
  padding: 10px;
}

.container {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  max-height: 100%;
  overflow: auto;
}

.root.container {
  background-color: red;
  max-height: 100%;
}

.sub.container {
  background-color: purple;
  width:100%; /*added this*/
}

.root.header {
  background-color: lightblue;
}

.sub.header {
  background-color: lightgreen;
}

.root.content {
  background-color: yellow;
  display:flex; /*added this*/
}

.sub.content {
  background-color: orange;
}

<div class="root container">
  <div class="root header">header</div>
  <div class="root content">
    <div class="sub container">
      <div class="sub header">menu</div>
      <div class="sub content">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </div>
  </div>
</div>

为了更好地了解问题，让我们删除一些属性并仅保留将触发不同行为的所需属性：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

div {
  padding: 10px;
}

.container {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  overflow: auto;
}

.root.container {
  background-color: red;
  max-height: 100%;
}

.sub.container {
  background-color: purple;
  height: 100%;
}


.root.header {
  background-color: lightblue;
}

.sub.header {
  background-color: lightgreen;
}

.root.content {
  background-color: yellow;
}

.sub.content {
  background-color: orange;
}

<div class="root container">
  <div class="root header">header</div>
  <div class="root content">
    <div class="sub container">
      <div class="sub header">menu</div>
      <div class="sub content">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </div>
  </div>
</div>

所有的问题都与内在有关height:100%用在.sub.container。从技术上讲并考虑到规格，这个高度应该不会auto因为父高度没有设置，但 Firefox 似乎能够评估这个高度。可能是由于嵌套的弹性容器，我们可以在知道内容之前评估父高度，或者只是一个错误。

Chrome 并没有这样做，只是忽略了高度，这是逻辑行为。

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

嵌套弹性盒高度与最大高度的相关文章

将样式添加到 mat-autocomplete 的 mat-option

我有这个 HTML代码在这里 https stackblitz com edit angular mat autocomplete with selected value vx1uqg file src 2Fapp 2Fautocomple
CSS 的波浪形状

我正在尝试使用 CSS 重新创建此图像我不需要重复它这就是我开始的但它只有一条直线 wave position absolute height 70px width 600px background e0efe3 div div 我认
Google Maps API 下拉列表，缩放至标记

我正在使用 Google Maps API v3 我有一个带有一些标记的简单地图我还有一个下拉列表我需要最少的代码来完成这项工作我想在下拉列表中选择一个标记并将选定的标记平移到它我已经尝试了一切并在网上查看我发现事情很接近但到
使用或实现可访问性的更好做法是什么？

我有一个下载链接但我找不到任何良好的可访问解决方案来说明如何处理这种情况我遵循一个共同的经验法则按钮做事链接去地方我的情况是我有一个触发文档下载的按钮同一页面我相信这应该是一个具有按钮角色的锚点因为它明确不触发重定向或导航
我可以在 CSS 类名中使用驼峰命名法吗

我想命名一个 CSS 类并调用它imgSuper 我可以在 CSS 类中使用驼峰命名法吗从技术上讲是可以的但这是有风险的因为虽然 CSS 语法大多不区分大小写但在某些浏览器中在某些条件下类名被视为区分大小写因为规范没有指定浏览
Google Chrome 客户端的 ASP.NET MVC 路由问题

我的 Silverlight 4 应用程序托管在 ASP NET MVC 2 Web 应用程序中当我使用 Internet Explorer 8 浏览时它工作正常但是 Google Chrome 版本 5 无法找到 ASP NET 控
IE7 显示问题：菜单中的表格

我写了一个菜单样式在 IE8 FF3 6 GC7 中运行良好现在的问题是我的老板希望它甚至可以在 IE7 上运行我真的很努力地让它在 IE7 上运行但无法获得相同的外观 menu css a outline none menu m
如何检测浏览器是否支持自定义元素

我正在查看 Modernizr 它应该有助于功能检测这应该可以帮助确定您的网站是否与给定的 Web 浏览器兼容但我没有看到任何表明我可以使用它来检测自定义 HTML 的内容我们在内容中创建和定义的元素如果不是 Modernizr 我如
为什么自关闭 iframe 标签会阻止显示更多 DOM 元素？

在 Firefox 和 Safari 上以下代码仅显示第一个 iframe 而添加结束标签可以解决问题我不明白为什么它不起作用当使用 DOMParser 解析第二个示例时它无论如何都会转换为自关闭 iframe 在这里小提琴 htt
删除数据表列中的额外填充

你好我创建了 JQuery DataTables 如下所示所以我的问题是如何删除图片列中过多的填充这就是我初始化表的方式 violators tbl DataTable aoColumnDefs bSortable false a
Web 串行 API - 未捕获（承诺中）DOMException：无法打开串行端口/所需成员 baudRate 未定义

下面的代码可以在我的 Xubuntu 机器上运行但现在我在 Kubuntu 上它不再工作了它不会打开端口 Arduino IDE 工作正常可以向开发板写入代码并且我可以在 Chrome 中选择设备 Arduino Uno 但当我尝
在 iPhone 3GS 与 iPhone 4 上为 Mobile Safari 嵌入 HTML5 视频

我在服务器上的 mp4 文件中有 H 264 AAC 编码的视频 mime 类型的视频 mp4 添加到 Web 服务器 IIS 7 并且我有一个带有视频标签的页面
使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
表单计算器脚本基本价格未加载 OnLoad

我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
NS_ERROR_SOCKET_ADDRESS_IN_USE

My code from selenium import webdriver import selenium webdriver support ui as ui import time from selenium webdriver su
指针事件：无，过滤，适用于 ie8 和任何地方，不适用于 ie9

正如我在这里看到的 https stackoverflow com questions 3680429 click through a div to underlying elements 4839672 4839672 过滤器可用于模拟跨
如何在jquery中以相反的顺序迭代元素？ [复制]

这个问题在这里已经有答案了我是jquery的新手我想知道如何使用each 在jquery中以相反的顺序迭代表单元素任何帮助将不胜感激尝试这个 input get reverse each function
如何仅在最后一个
处给出透明六边形角度？

我必须制作这样的菜单替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
如何获取浏览器视口中当前显示的内容

如何获取当前正在显示长文档的哪一部分的指示例如如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近那么我想得到 500 n501 n502 或类似的内容显然大多数场景都会比
CSS 是否有不等于选择器？

CSS中有类似不等于的东西吗例如我有以下代码 input 但对于某些输入我需要将其作废我想通过将类 reset 添加到输入标签来做到这一点例如

随机推荐

正确使用 JavaScript 接口关键字

首先不我并不想为我的 JavaScript 代码创建任何类似 Java 的接口我到处都见过这些问题虽然我对 JavaScript 来说还是个相对新手但我知道这些不是该语言的一部分不过我很好奇它的实际用途是什么interface
Inno Setup：如果程序文件夹中存在文件，则关闭安装程序向导

我正在尝试创建一个演示安装程序如果它检测到该文件close txt在程序文件夹中然后它会关闭向导或中止安装我正在运行一个计划任务该任务会在两天后自动卸载该应用程序初次安装时close txt文件安装在程序文件夹中然后自动卸载后c
了解 Nest 中的 Inject、Injectable 和 InjectRepository

我来自非打字稿和非巢背景我正在检查代码发现了这段代码片段 import Inject Injectable from nestjs common import InjectRepository from nestjs typeorm i
ItextSharp 中的 Pdf 合并问题（合并后的 Pdf 不保留其值）

我们正在尝试使用 ITextSharp 合并三个 PDF 问题是合并后我们只能从第一个 PDF 中获取数据而其他两个 PDF 则不会保留其值所有这些 PDF 都具有相同的结构即它们使用具有不同数据的相同模板因此我的假设是它们具有相同
删除事件处理程序

Is this Button Click new EventHandler Button Click 与此相同 Button Click Button Click 我问这个问题是因为在我看来前者似乎正在删除对方法的新引用而后者正在删除方
jQuery-检测 SPAN 字段内容的变化

我有下面的代码用于模拟文本框
为什么 Guava eventbus（模块）不可扩展？

在最新版本中以及之前的版本中 Guava eventbus 模块不可扩展目前它使用订阅者和SubscriberRegistry在内部决定调度事件但这些类是包私有的因此不可扩展如果Subscriber and Subscriber
以编程方式在 WPF ControlTemplate 中创建 Storyboard

我有一个加载的 WPF 应用程序Pages在模板化的NavigationWindow 我想在加载新页面时实现幻灯片过渡并且由于可以调整窗口大小因此据我所知需要以编程方式确定转换的目标值我在中尝试了以下操作NavigationWind
SPOJ PRIME1：TLE [关闭]

Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案我尝试为此问题实现分段筛算法 http www spoj pl problems PRIME1 如下 include
名称为“svn_delta”的临时文件已在 /usr/lib/perl5/vendor_perl/5.14/Git.pm 第 1024 行使用

我正在尝试使用git svn clone在 svn 存储库上使用 cygwin 64 我不断收到此错误消息 Temp file with moniker svn delta already in use at usr lib perl5 v
Visual Studio 2010 IntelliSense -> Enter 将不再自动完成

我非常使用VS2010的IntelliSense 有时我无法分辨何时以及为何它们的 IntelliSense 发生了变化示例标签 lblTestTest 正常的行为是我输入 lblTes 查看选择标签的 IntelliSence
Android 以编程方式设置自定义视图的高度和宽度

我创建了一个名为的自定义视图Graphview 这是 GraphView 类的结构 public class GraphView extends View public GraphView Context context float val
从 Java 应用程序发布推文

我想从 java 应用程序自动发推文最简单的方法是什么我可以避免使用 Twitter4j 等库吗我需要一个简单的 api 的实现例如推文用户名密码消息谢谢我建议您使用 twitter4j 使用它您可以轻松创建 oAuth
为什么 ManagedChannelBuilder 没有用于与服务器建立 TLS 连接的 TLS 参数？

在这个例子中https github com grpc grpc java blob master interop testing src test java io grpc testing integration TlsTest java
如何在 PySide 中添加选项卡

我正在尝试为 2 个网格布局添加选项卡但是当我运行代码时似乎没有选项卡 I think wid inner tab QtGui QTabWidget 未将选项卡正确添加到网格中 import sys from PySide import
ng 服务失败 - webpack 无法编译 - ./src/main/webapp/manifest.webapp 中出现错误

当我尝试运行 ngserve 时我得到以下信息 ERROR in src main webapp manifest webapp Module parse failed home fergal dev jhipster sam git s
是否可以从另一个应用程序中卸载一个 Android 应用程序？

假设有两个不同的 Android 应用程序 A 和 B 应用程序 A 是系统管理员有什么办法可以卸载应用程序 B 或使其无法运行吗是的这是可能的你需要使用Intent ACTION DELETE看看下面的代码 Uri package
将 Kyber.Point 转换为字节或使用 Kyber.Point 提取字节

如何转换Kyber Point https pkg go dev go dedis ch kyber section readme在 Golang 中输入字节或提取字节我希望与 HMAC 一起使用的密钥 ECDH 具有哈希密钥 Code
查找 Java TreeMap 中的元素位置

我正在使用字符串的 TreeMapTreeMap
嵌套弹性盒高度与最大高度

update 我在 Chrome 72 上看到这种奇怪的行为 FireFox 64 没问题我对嵌套弹性盒有疑问在下面的代码片段中我添加了一个虚拟 XL 高度 root container 这样当有很多的时候结果正是我想要的items溢

嵌套弹性盒高度与最大高度

嵌套弹性盒高度与最大高度 的相关文章

随机推荐

热门标签

嵌套弹性盒高度与最大高度的相关文章