我有一个 flexbox 布局。
html如下:
<div class="grid">
<div class="row">
<div class="column">Content</div>
<div class="column">Content2</div>
<div class="column">Content2</div>
</div>
<div class="row">
<div class="column">Content</div>
<div class="column">Content2</div>
<div class="column">Content2</div>
</div>
</div>
和CSS:
.grid {
overflow: auto;
width: 500px;
height: 400px;
background-color: #eee;
display: flex;
flex-direction: column;
}
.row {
background-color: #ddd;
align-items: stretch;
display: flex;
border: 2px solid black;
}
.column {
flex: 1 0 20em;
padding: 0.2em;
border: 2px solid lightblue;
/*background-color: hsla(0, 100%, 80%, 50%);*/
}
(参见 https://jsfiddle.net/bz71qptu/1/)
在前面的代码中,.box
元素不会扩展到其子元素的宽度。我如何让它这样做?
编辑
我已经在 jsfiddle 中添加了一个我希望在视觉上实现的示例
编辑2
我需要稍微更改问题以适应我的特定问题。父元素与 flex-direction: column
对齐,这意味着使用 min-width
似乎不起作用。如果没有这个,min-width
解决方案将是完美的。
编辑3
我非常感谢大家的帮助,但我不确定我是否在我的示例中准确地捕捉到了我想要的行为,即使我得到了所有的建议,我似乎也无法捕捉到让它做我想做的事。这是一个更好的 jsfiddle ,如果你看这个,我已经设置了边框以显示所有内容的位置。我已经通读了答案,看看是否可以根据我的情况调整它们,但我不太明白。如果这个 fiddle 已经得到解答,我深表歉意。
最佳答案
修改后的答案
您修改后的问题将 flex-direction
从 row
更改为 column
。
通过此调整,应用于 .box
的 flex
属性不再与您的目的相关,因为它现在处理垂直大小。换句话说,对于 column
,flex
属性控制高度而不是宽度。
然而,正如我在评论中提到的,将 overflow: auto
添加到 .box
似乎可以完美地工作(在 Chrome、FF 和 IE11 中测试)。
您在评论中提到它破坏了布局引擎。布局对我来说是坏的,在 jsFiddle 中也是如此。只需再次点击 [运行]。
自从几天/几周(?)前 jsFiddle 启动他们的升级以来,它一直引起一些困惑,因为它现在缓存代码。您可能需要清除 jsFiddle cookie(在浏览器中转到 chrome://settings/cookies)或在加载后再次运行修改后的代码。
原始答案
flex-basis
值不是content
,而是尝试auto
或0
。
The content
value isn't supported yet.
事实上,也许简单的 flex: 1
就可以为您工作。
看这里:
关于html - flexbox 如何在溢出时扩展到它的 child ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34226150/