问题标签 [flexbox]

我对 flexbox（手风琴）有疑问。在下面的示例中，我有一组内容，每个组在水平弹性框中都有一个单元格，每个单元格内都有与每个组相关的内容。

现场示例和代码在这里。

问题是当一个组的内容太大时，它会溢出弹性框，我无法为此提出解决方案。

我在 Google Chrome 中使用 flexboxes（只需要支持这个浏览器）来创建动态布局。我在一个 div 元素中有 n 个子元素，它们应该以相同的比例共享整个空间。由于新引入的弹性盒，这可以正常工作。但我还必须将每个内部 div 的高度设置为 0。如果我想将此 div 内的元素拉伸到 100% 高度，它使用给定值 0 而不是任何计算值。因为我选择了 flex-boxes 以防止使用 javascript，所以我更愿意保持这种方式。有没有其他方法可以使图像的高度填充 div？

这是代码（仅在 Google Chrome 中测试过）：

html

css

在浏览器中观看的代码

据我了解，CSS 灵活框布局模块正在被重写，并且display:box正在被弃用，取而代之的是display:flexbox.

当前是否display:flexbox支持任何浏览器（发行版、测试版或夜间）？有谁知道我在哪里可以找到一些关于 flexbox 中的新内容、它与旧模块之间的区别和/或为什么旧模块被重写的信息？

我有一个绝对定位的 divdisplay: box

在 Chrome 中它工作得很好， div 的孩子水平对齐，但在 Firefox 中它似乎不起作用。

如果我删除position: absolute它，它在两个浏览器中都可以正常工作，但我需要它。

示例：http ://dabblet.com/gist/1716069

我有一个应用程序，它使用像下面这样的经典电子邮件布局。

我使用新的 CSS3 flexbox 模型构建了它，它运行良好，直到我添加了用户在文件夹框中动态添加新项目的功能。我希望 flexbox 能够以这样的方式工作，只要文件夹框中还有空间，它就不会开始增长到下面的任务框。不幸的是，这不是我所看到的（在 Chrome 17 中）。

我在这里构建了一个 JSFiddle来演示这个问题。只需单击“添加文件夹”链接，您就会看到文件夹框在增长，即使它还有足够的空间来容纳新的孩子。

对问题。如何使用 flexbox 构造两个垂直对齐的盒子，其中一个占据可用高度的三分之二（box-flex 2），另一个占据三分之一（box-flex 1），并且它们以这种方式进行当新内容添加到第一个盒子时，它不会开始增长，直到空间不足。

我试图归档一个简单的侧边栏 | 用普通的浮点数在视觉上显示内容，然后我使用经典的等高列技术（margin-bottom: -99999px; padding-bottom: 99999px等），但我不喜欢它，我在这里和那里遇到了一些问题，所以我决定使用 flex-box，我试过了前段时间有固定大小的宽度，它工作得很好，但现在我有百分比宽度，所以似乎 Firefox 根本不喜欢它......

这个例子展示了我通常期望 flex-box 是如何工作的，它在 safari 和 chrome 中做得很好，但是 firefox 只是忽略了百分比宽度......我发现这是 firefox 的一个已知问题，但它是一个旧问题，我想他们已经解决了...

然后我尝试了一些不同的东西来欺骗firefox，但它仍然不是我所期望的，因为侧边栏根据内容在页面之间具有不同的大小......

所以我最终放弃了具有流畅布局的 flex-box 并使用更简单的东西来满足我的需求......

但是我很想知道是否有人通过任何解决方法解决了这个问题，或者我们是否都在等待 mozila 解决这个问题......

谢谢！

似乎在 Firefox 中，如果我有A固定宽度/高度的 div 并且它有一个B宽度和高度设置为 100% 的子 div，那么如果或任何其他祖先B的计算宽度将为 0（因此不显示）Aof Bhas display: box（或适当的供应商前缀版本）设置。

示例 HTML：

示例 CSS：

在 Firefox 中，将显示一个绿色框，但在 Chrome 中，将显示一个红色框。

这是查看此示例的小提琴。这是另一个嵌套 div 层的另一个小提琴，它表明即使它不是有问题的元素的直接父级，也会发生这种情况display: box。

我希望width: 100%B 上的声明强制它与父级的大小相同（即 Chrome 中的行为）。为什么宽度计算为0？

我正在尝试创建一个灵活的框布局来填充整个视口，并且如果内容太长，则内部部分会滚动。然而，内部内容正在扩展整个布局，而不是坐在较小的区域内并滚动。

我在这里设置了一个演示，其中包含更多详细信息：http: //jsbin.com/ezazig（仅限 Firefox）

这height: 100%;不是问题，即使我给出.layout了 500px 的固定高度，它仍然被忽略。

知道问题是什么吗？

我有一个允许单个子元素的 flexbox div。到目前为止，我已经能够很好地对齐孩子（上、左、右、下等），包括垂直拉伸。我还希望能够在垂直拉伸的同时支持水平拉伸（“同时”似乎是关键）。

我已经能够通过在子元素上将“flex”属性设置为“1 100%”来完成水平拉伸，但这似乎忽略了应用于父元素的任何填充（以及应用于子节点的任何边距）事情）。

查看 flexbox 规范，我无法找到任何其他方法来沿着 flexbox 的主轴执行此操作。横轴拉伸没有问题。

早上好，

当我将一个元素嵌套display: -webkit-box在另一个元素中时，display: -webkit-box它无法将其元素正确地包含为一个灵活的盒子。请参阅下图中删除按钮后面的文本。

李HTML：

LI CSS（美学省略）：

随着视口宽度的变化，.reference 保持灵活是至关重要的。

该问题可以通过删除 .reference's 来解决display: -webkit-box;，但这意味着我不能在 .reference 中的元素上使用灵活盒模型，我需要将项目编号（1.、2.等）保留在自己的列中。

非常感谢任何帮助。亲切的问候。