程序员经验分享-hwhale

父级 Flexbox 容器忽略子级 Flexbox 最小宽度

2024-02-20

很短的史前史

我的故事从奋斗开始overflow-wrap: break-word;在弹性盒内工作。 Flexbox 容器不想理解它的项目可以缩小，尽管该项目可以破坏长单词：

.body {
  width: 300px;
  border: 1px solid black;
  padding: 8px;
  background-color: #ccc;
}

.flex-column {
  display: flex;
}

.item {
  overflow-wrap: break-word;
  background-color: #fff;
  padding: 8px;
}
<div class="body">
  <div class="flex-column">
    <div class="item">
      This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.
    </div>
  </div>
</div>

幸运的是，我们可以帮助 Flexbox 理解它可以使用以下方法缩小其项目：min-width: 0;关于该项目：

.body {
  width: 300px;
  border: 1px solid black;
  padding: 8px;
  background-color: #ccc;
}

.flex-column {
  display: flex;
}

.item {
  overflow-wrap: break-word;
  background-color: #fff;
  padding: 8px;
  /* Okay, it fixes this */
  min-width: 0;
}
<div class="body">
  <div class="flex-column">
    <div class="item">
      This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.
    </div>
  </div>
</div>

然而，现实世界要复杂一些。

问题

在我们的应用程序中，我们有许多嵌套的弹性盒。所以这个例子应该是这样的：

.body {
  width: 300px;
  border: 1px solid black;
  padding: 8px;
  background-color: #ccc;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
}

.item {
  min-width: 0;
  padding: 8px;
  background-color: #fff;
  overflow-wrap: break-word;
}
<div class="body">
  <div class="flex">
    <div class="flex">
      <div class="flex">
        <div class="flex-column">
            <div class="item">
              This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如您所见，flex我们的容器flex-column忽略了它的孩子可以很好地收缩的事实。我不明白为什么它会这样。你能向我解释一下吗？为什么弹性盒容器不尊重它的子弹性盒min-width: 0?

我找到的解决方案是设置min-width: 0 to all层次结构中的弹性框看起来非常老套和危险，因为我可以在意想不到的地方破坏我们的应用程序布局。


要理解这一点，只需为您的项目添加不同颜色的边框，您就会看到不同级别的溢出。更准确地说，我们只有一个溢出，在添加每个之后，该溢出正在移动到较低的杠杆min-width.

.body {
  width: 300px;
  border: 1px solid black;
  padding: 8px;
  background-color: #ccc;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
}

.item {
  padding: 8px;
  background-color: #fff;
  overflow-wrap: break-word;
}
<div class="body">
  <div class="flex" style="border:5px solid red;">
    <div class="flex" style="border:5px solid green;">
      <div class="flex" style="border:5px solid blue;">
        <div class="flex-column" style="border:5px solid yellow;">
          <div class="item" style="border:5px solid pink;">
            This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
            your example looking how you want it to look. But both values are being rendered correctly.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Every min-width将修复一个溢出，允许元素缩小并将溢出移动到下一级。这就是为什么你需要级联min-width.

添加一个：

.body {
  width: 300px;
  border: 1px solid black;
  padding: 8px;
  background-color: #ccc;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
}

.item {
  padding: 8px;
  background-color: #fff;
  overflow-wrap: break-word;
}
<div class="body">
  <div class="flex" style="border:5px solid red;">
   <!-- adding min-width at this level -->
    <div class="flex" style="border:5px solid green;min-width:0;">
      <div class="flex" style="border:5px solid blue;">
        <div class="flex-column" style="border:5px solid yellow;">
            <div class="item" style="border:5px solid pink;">
              This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

添加另一个：

.body {
  width: 300px;
  border: 1px solid black;
  padding: 8px;
  background-color: #ccc;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
}

.item {
  padding: 8px;
  background-color: #fff;
  overflow-wrap: break-word;
}
<div class="body">
  <div class="flex" style="border:5px solid red;">
    <div class="flex" style="border:5px solid green;min-width:0;">
      <!-- adding min-width at this level -->
      <div class="flex" style="border:5px solid blue;min-width:0">
        <div class="flex-column" style="border:5px solid yellow;">
          <div class="item" style="border:5px solid pink;">
            This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
            your example looking how you want it to look. But both values are being rendered correctly.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Again:

.body {
  width: 300px;
  border: 1px solid black;
  padding: 8px;
  background-color: #ccc;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
}

.item {
  padding: 8px;
  background-color: #fff;
  overflow-wrap: break-word;
}
<div class="body">
  <div class="flex" style="border:5px solid red;">
    <div class="flex" style="border:5px solid green;min-width:0;">
      <div class="flex" style="border:5px solid blue;min-width:0">
       <!-- adding min-width at this level -->
        <div class="flex-column" style="border:5px solid yellow;min-width:0;">
          <div class="item" style="border:5px solid pink;">
            This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
            your example looking how you want it to look. But both values are being rendered correctly.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

最后一个：

.body {
  width: 300px;
  border: 1px solid black;
  padding: 8px;
  background-color: #ccc;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
}

.item {
  padding: 8px;
  background-color: #fff;
  overflow-wrap: break-word;
}
<div class="body">
  <div class="flex" style="border:5px solid red;">
    <div class="flex" style="border:5px solid green;min-width:0;">
      <div class="flex" style="border:5px solid blue;min-width:0">
        <div class="flex-column" style="border:5px solid yellow;min-width:0;">
         <!-- adding min-width at this level -->
          <div class="item" style="border:5px solid pink;min-width:0">
            This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
            your example looking how you want it to look. But both values are being rendered correctly.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

wordwrap

父级 Flexbox 容器忽略子级 Flexbox 最小宽度 的相关文章

  • 使用 flex 将项目与底部对齐

    我正在尝试使用 flex 将父级内部的项目与父级底部对齐 但由于某种原因它不起作用 我究竟做错了什么 login border 1px solid red height 50px display flex login border radi

  • 移动设备中的 CSS 响应式设计不适用于 uc 浏览器和 Opera Mini [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 UC 和 Opera Min 浏览器上的响应式网站无法正常工作 我们使用媒体查询进行响应式设计 我搜索了一下 发现了一些

  • 将 Bootstrap CSS 中的列表居中[重复]

    这个问题在这里已经有答案了 重复报告后编辑 抱歉 我认为建议的重复项实际上可能是重复项 我先尝试了一下 但它对我不起作用 因此出现了一个新问题 再次查看新的建议答案后 我意识到我的问题可能与我正在使用的工具 codepen io 的开箱即用

  • 如何在 Android 上的 PhoneGap 中设置音频播放速率？

    有谁能够让音频播放速率在 Android 上工作吗 媒体播放器似乎覆盖 忽略音频标签的播放速率属性 None

  • 如何居中对齐数据表标题

    我是数据表新手 当我制作表格标题时 它总是左对齐 如何将标题设置为居中对齐 我已阅读 datatables net manual styling classes 和 datatables net reference option colum

  • 将 Regex 对象分配给 html 输入模式

    我需要以编程方式将正则表达式对象分配给输入元素模式属性 以下是我当前的实现 var regex d 5 element attr pattern regex toString slice 1 1 有没有更好的方法来做到这一点而不需要字符串操

  • 多行有多个提交按钮，我应该为每个按钮制作一个表单吗？

    我列出了大约 20 行 每行代表一个订单 每行需要有 3 个按钮 每个按钮单击将执行不同的操作 我有 3 个操作来处 理每个按钮发布请求 我只是不确定如何为每个按钮设置 Html 表单 tr td td tr

  • 如何将值发布到输入框中？

    Intro I would like to get the current time after clicking at click and POST the value into input text box Note 假设包含引导样式表

  • 固定 Div 与静态 div 的滚动条重叠

    我无法按照我想要的方式设计布局 我有一个内容区 content 您可以在示例图像中看到的灰色 里面有一个黄色元素 这个div是position static height 100 现在我有一个 left paneldiv 也 与positi

  • 在 Dartlang 中下载大文件

    我需要使用 dartlang 从浏览器下载较大的文件 我一直在使用 data uri 来下载 但已经达到了该方法的大小限制 想知道最好的方法是什么 我研究了使用 HTML5 文件系统 API 但它已被弃用 显然在大多数浏览器中从未真正实现过

  • Firefox 忽略 CSS 中的最小高度

    由于某些原因 最小高度在 Firefox 上不起作用 我尝试在 body 上设置 min height 但 Firefox 完全忽略了它 由于我的页面是动态的 我不能只将高度设置为 100 我应该怎么办 body border 1px so

  • Bootstrap 4 Beta 0 网格系统上的 Rowspan

    您好 我正在开发一个使用 Bootstrap 4 Beta 的电子商务模板 我让它在移动设备上工作 但在桌面设备上我不知道如何让购买按钮保持在标题下 在我的方法中 它出现在 图库 部分下 Desired Desktop Desired Mo

  • 对其中一个具有相同 tabindex 的焦点的所有元素应用相同的效果

    在我的上一篇文章中 我问了如何通过 css 选择器使不可聚焦的元素变得可聚焦 答案是使用tabindex 现在我希望 当具有选择器的元素获得焦点 单击 时 选择器选择的另一个元素也能获得效果 这可能听起来很奇怪 但我很久以前就可以不小心这样

  • Angular SlickGrid 对齐标题文本

    我正在使用角度SlickGrid并希望将列标题中的文本居中或右对齐 并非所有列都以相同的方式 我发现 有一个headerCssClass列定义中的属性 但我一直尝试 这种样式似乎从未被应用 对于列定义 id sourceNumber nam

  • 从字节数组设置 img src

    我需要设置img src我在对象中拥有的字节数组的属性 img

  • 如何从 CSS 选择器中提取类名？

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if

  • WordPress 子主题包括包含文件

    我在一家WordPress使用 AMPPS 作为本地主机在我的本地计算机上进行设置 使用 Delta 主题 我创建了一个子主题 delta2 child 初始设置效果很好 但是 我需要更改包含文件夹中名为 home slider php 的

  • 如何将MathJax公式转换为img

    Mathjax 现在在我的项目中运行良好 但有一个问题 有没有办法将MathJax的公式 纯html和css 转换成img文件 我可以保存 MathJax 可以配置为生成 SVG 看http docs mathjax org en late

  • 使用flex-basis控制行上显示的项目数

    我想在使用 Flex 时将元素推出以隐藏它们 例如 如果flex basis为 50 仅显示两个项目弯曲到给定空间 而其他元素则在overflow hidden 领土 Or if flex basis为 25 则仅显示 4 个 Flex 元

  • 我自己的而不是从其他网站借用的图像的正确 img src 是什么？

    在我的计算机上 保存 css 和 html 文件的文件夹还包含一些我想要插入到 html 中的图像 如果我从其他网站借用图像 我知道如何获取图像的 URL 如何获取文件夹中但尚未出现在互联网上的图像的 URL 我是否必须将图像上传到其他网站

随机推荐

  • 在 XPath 中使用翻译函数会出现错误

    我必须执行不区分大小写的 XML 搜索 我已经编写了运行良好的 XPath 表达式 但是当我使用translateXPath 表达式内的函数我收到错误 下面是运行良好的 XPath 表达式 string upper ABCDEFGHIJKL

  • 控制台中出现错误：无法加载资源：net::ERR_CONNECTION_RESET

    我刷新了我的应用程序页面并在控制台中收到此错误Failed to load resource net ERR CONNECTION RESET 我尝试重新安装 XAMPP 版本 但这对我不起作用 我认为你正在使用铬 问题是证书不匹配或证书过

  • Android 模拟器在 Ubuntu 11.10 上崩溃

    我在 Ubuntu 11 10 32 位 机器上安装了 Android SDK 我还安装了 Eclipse 3 7 和相关的 Android 开发插件 全部在 openjdk6 上 使用 eclipse 我成功创建了一个 Android 虚

  • Swift distance() 方法抛出致命错误：无法增加 endIndex

    我试图在字符串中找到子字符串匹配 并获取匹配的位置 我无法弄清楚以下代码有什么问题 let str1 hello let cmp let searchRange Range start str1 startIndex end str1 en

  • 浏览器中 bash 命令的代码块忽略路径

    我正在尝试开发一种用户友好的方式来设计 bash 命令的代码突出显示样式 我将使用以下示例来澄清问题这一页 https themeaningfulengineer github io Linux kernel in QtCreator 在下

  • IIS URL 重写规则

    我有一个 AngularJS 应用程序 它利用 URL 重写进行链接 我的重写规则如下

  • 移动设备注册 Spring Social

    我正在尝试将 Spring Social 用于我的 REST 服务和移动应用程序 我想知道最好的方法是什么 我打算使用linkedin google 登录和密码验证在我的里面移动应用 这个社交登录应该是连接到我的数据库中的用户 我的 Spr

  • 使用 Geopandas，如何选择不在多边形内的所有点？

    我有一个包含芝加哥地址的 DataFrame 我已将其地理编码为纬度和经度值 然后编码为 Point 对象 使 DataFrame 成为 GeoDataFrame 芝加哥以外的一小部分使用 LatLong 值进行了错误的地理编码 我有一个芝

  • cc1plus：错误：g++ 无法识别命令行选项“-std=c++11”

    我正在尝试使用编译g 以及 std c 11 or c 0x flags 但是 我收到这个错误 cc1plus error unrecognized command line option std c 11 g 版本 g GCC 4 1 2

  • settings.py 中模板文件夹的 Django 路径不正确

    我正在学习 Django 并且正在遵循学习 Django 1 11教程 这是我当前的项目树 manage py muypicky init py old settings py settings base py Contains the s

  • LazyColumn 删除项目时显示错误

    我正在创建一个应用程序 除其他外 它使用户能够添加消费者 然后稍后将其删除 消费者显示在卡片中 最后有一个删除按钮 添加消费者效果很好 但是 当我尝试删除消费者时 应用程序屏幕中删除的始终是消费者last one 我知道这不是一个逻辑实现错

  • Eclipse m2eclipse 从本地存储库获取依赖项

    我在我的机器上本地安装了依赖项 m2 repository blah blah blah 并且 m2eclipse 无法识别它们 我认为 m2eclipse 正在使用自己的 Maven 实例 有没有办法强制m2eclipse在osx中 使用

  • Flask 和传输编码：分块

    我们正在尝试让 Flask Web 服务正常工作 但我们在流式帖子方面遇到了一些问题 即当标头包含 Transfer Encoding chunked 时 默认 Flask 似乎不支持 HTTP 1 1 有解决办法吗 我们正在运行这个命令

  • #在Lua中是什么意思？

    我在 Lua 中经常看到哈希字符 被添加到变量前面 它有什么作用 EXAMPLE sort AIs in currentlevel table sort level ais function a b return a y lt b y en

  • 如何使用 ARCore 相机拍摄物体图像？

    我正在使用 ARCore 创建一个应用程序来在空白表面上显示一些图像 我想捕获显示对象的表面的图像 我在 AR 相机屏幕上放置了一个拍摄按钮 是否可以使用 ARCore 相机中的物体捕捉该视图 如果您只需要 ARCore 视图的屏幕截图 您

  • Selenium：查找其他元素“旁边”的元素

    我正在使用 Selenium 将 Web 测试添加到我的项目中 我已经进行了一系列测试 使用以下方法检查特定元素 final WebElement dateElement web findElement By id elementId 这很

  • Swift 版本的 elementsSeparatedByString

    我知道这是菜鸟问题 我在问之前确实先搜索了一下 但我想知道的却没有确切的答案 我们如何在不使用 Objective C 的情况下将字符串拆分为数组 例如 var str Today is so hot var arr str compone

  • 另一个 UIViewController 中 UIViewController 的新实例：为什么我不能设置实例变量？

    所以我有一个名为 MyTabBarViewController 的 UIViewController 子类 它有一个 UIScrollView 在 MyTabBarViewController 内部 我正在创建另一个名为 PhotoView

  • IIS 7 中的“传递身份验证”是什么？ [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 在 IIS 7 中 在指定网站的物理路径并单击 测试设置 按钮后 我收到以下警告 服务器配置为使用内置帐户的直通身份验证来访问指定的物理路径 但是 I

  • 父级 Flexbox 容器忽略子级 Flexbox 最小宽度

    很短的史前史 我的故事从奋斗开始overflow wrap break word 在弹性盒内工作 Flexbox 容器不想理解它的项目可以缩小 尽管该项目可以破坏长单词 body width 300px border 1px solid b

热门标签