gpt4 book ai didi

CSS3 Flexbox 全高应用和溢出

转载 作者:技术小花猫 更新时间:2023-10-29 10:09:26 26 4
gpt4 key购买 nike

我有一个应用使用经典的电子邮件布局,如下所示。

我使用新的 CSS3 flexbox 模型构建了它,在我为用户添加在文件夹框中动态添加新元素的功能之前,它一直运行良好。我希望 flexbox 的工作方式是只要文件夹框中还有空间,它就不会开始增长到下面的任务框中。不幸的是,这不是我所看到的(在 Chrome 17 中)。

我构建了一个 JSFiddle here这说明了问题。只需点击 添加文件夹 链接,您就会看到文件夹框在变大,即使它有足够的空间容纳新的 child 。

对于这个问题。如何使用 flexbox 构建两个垂直对齐的盒子,使一个占据可用高度的三分之二(box-flex 2),另一个占据三分之一(box-flex 1 ),并且他们这样做的方式是,当新内容添加到第一个盒子时,它不会开始增长,直到空间不足。

最佳答案

我不能确定这是浏览器错误还是 flex 模型实际上应该如何工作。如果这是它应该如何工作,我同意这并不完全直观!

我通过将列表包装在绝对定位的 div 中并将溢出设置为自动找到了解决方法。这允许 flexbox 保持其原始状态,并且仅在重新计算整个布局而不是内容更改时才更改。

这是更新后的标记:

<section id="folders">
<div class="dynamicList">
<h2>Folders</h2>
<ul>
<li>Folder 1</li>
<li>Folder 2</li>
</ul>
<a href="#" id="add">Add Folder</a>
</div>
</section>

以及更新后的 CSS:

#left #tasks,
#left #folders {
position: relative;
}

.dynamicList {
bottom: 0;
left: 0;
overflow: auto;
position: absolute;
right: 0;
top: 0;
}

我把你的 fiddle fork 到这里来演示: http://jsfiddle.net/MUWhy/4/

更新:

如果您希望标题保持固定并且只让文件夹和任务列表的内容滚动,那么我会考虑将标题和添加按钮放在 #left div 中它们自己的固定高度框中。它有点标记,但仍然很简单。我没有在 JSFiddle 上尝试过,但我认为那将是最好的选择。

关于CSS3 Flexbox 全高应用和溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9251447/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com