草庐IT

html - 当 flexbox 元素以列模式包装时，容器不会增加其宽度

coder 2023-07-30 原文

我正在处理一个嵌套的 flexbox 布局，它应该按如下方式工作:

最外层 (ul#main) 是一个水平列表，当向其中添加更多项时，它必须向右扩展。如果它变得太大，应该有一个水平滚动条。

#main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* ...and more... */
}

此列表的每个元素 (ul#main > li) 都有一个标题 (ul#main > li > h2) 和一个内部列表 (ul #main > li > ul.tasks)。这个内部列表是垂直的，需要时应该换行。当包装成更多的列时，它的宽度应该增加以便为更多的元素腾出空间。此宽度增加也应适用于外部列表的包含项。

.tasks {
    flex-direction: column;
    flex-wrap: wrap;
    /* ...and more... */
}

我的问题是，当窗口的高度太小时，内部列表不会换行。我尝试了对所有 flex 属性进行大量篡改，试图遵循 CSS-Tricks 中的指南。一丝不苟，但没有运气。

这JSFiddle显示我到目前为止所拥有的。

预期结果 (我想要的):

实际结果 (我得到的):

旧结果 (我在 2015 年得到的结果):

更新

经过一些调查，这看起来像是一个更大的问题。 所有主流浏览器的行为方式都一样，这与我的嵌套 flexbox 设计无关。即使是更简单的 flexbox 列布局也拒绝在元素换行时增加列表的宽度。

这other JSFiddle清楚地说明了问题。在当前版本的 Chrome、Firefox 和 IE11 中，所有元素都正确换行；列表的高度在row 模式下增加，但它的宽度在column 模式下不增加。此外，当更改 column 模式的高度时根本不会立即回流元素，但在 row 模式下会。

然而，official specs (look specifically at example 5)似乎表明我想做的事情应该是可能的。

有人能想出解决这个问题的方法吗？

更新 2

在调整大小事件期间使用 JavaScript 更新各种元素的高度和宽度进行了大量试验后，我得出的结论是，尝试以这种方式解决它太复杂、太麻烦。此外，添加 JavaScript 肯定会破坏 flexbox 模型，它应该尽可能保持干净。

现在，我回退到 overflow-y: auto 而不是 flex-wrap: wrap 以便内部容器在需要时垂直滚动。它不是很漂亮，但它是一种前进的方式，至少不会过多地破坏可用性。

最佳答案

问题

这看起来像是 flex 布局的根本缺陷。

列方向的 flex 容器不会扩展以容纳额外的列。 (这在 flex-direction: row 中不是问题。)

这个问题已经被问过很多次(见下面的列表)，在 CSS 中没有明确的答案。

很难将此确定为错误，因为所有主流浏览器都会出现该问题。但它确实提出了一个问题:

How is it possible that all major browsers got the flex container to expand on wrap in row-direction but not in column-direction?

您会认为至少其中一个会做对。我只能推测原因。也许这是一个技术上困难的实现，因此在本次迭代中被搁置了​​。

更新:该问题似乎已在 Edge v16 中得到解决。

问题说明

OP 创建了一个有用的演示来说明问题。我在这里复制它:http://jsfiddle.net/nwccdwLw/1/

变通方案

来自 Stack Overflow 社区的 Hacky 解决方案:

更多分析

描述相同问题的其他帖子

关于html - 当 flexbox 元素以列模式包装时，容器不会增加其宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33891709/

素以容器stackoverflownoreferrernoopenerhtmlcssflexbox

有关html - 当 flexbox 元素以列模式包装时，容器不会增加其宽度的更多相关文章

  1. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  4. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？ 最佳答案

  5. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  6. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  7. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  8. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  9. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  10. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

随机推荐