CSS3 Flexbox全高应用程序和溢出 [英] CSS3 Flexbox full-height app and overflow

问题描述

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

I have a app that uses a classic email like layout like the one below.

我使用新的CSS3 flexbox模型构建它，它的工作非常出色，直到我添加了用户的能力动态添加文件夹框中的新项目。我本来希望flexbox的工作方式，只要有空间留在文件夹框中，它不会开始增长到下面的任务框。不幸的是，这不是我看到的（在Chrome 17中）。

I have constructed it using the new CSS3 flexbox model and it works brilliantly until I add the ability for the user to dynamically add new items in the folders box. I would have hoped that flexbox worked in such a way that as long as there is space left in the folders box it would not begin growing into the tasks box underneath. Unfortunately this is not what I am seeing (in Chrome 17).

我已经构建了一个JSFiddle 这里演示了问题。只需点击添加文件夹链接，您就会看到文件夹框变大，即使它有足够的空间容纳新的孩子。

I have constructed a JSFiddle here that demonstrates the problem. Just click the Add Folder link and you will see the folders box growing, even though it has space enough left to accommodate the new child.

对的问题。如何使用flexbox创建两个垂直对齐的框，使用一个占据可用高度的三分之二（ box-flex 2 ）和另一个三分之一（ box-flex 1 ），并且他们这样做，当新内容添加到第一个框，它不会开始增长，直到它空间不足。

To the question. How can I construct two vertically aligned boxes using flexbox in such a way that one takes up two thirds of the available height (box-flex 2) and the other one third (box-flex 1) and that they do it in such a way that when new content is added to the first box it does not begin growing until it is out of space.

推荐答案

我不能肯定地说，如果这是一个浏览器错误，或者事实上如何flex模型应该工作。如果这是它应该工作我会同意这不完全直观！

I can't say for sure if that's a browser bug or if it is in fact how the flex model is supposed to work. If that is how it should work I'd agree that's not exactly intuitive!

我发现一个工作围绕列表在一个绝对定位的div，溢出设置为汽车。这允许弹性框保持其原始状态，只有在重新计算整个布局时与内容改变时相比更改。

I found a work around by wrapping the lists in an absolutely positioned div with the overflow set to auto. This allows the flex boxes to maintain their original states and only change when the entire layout is recalculated vs. the content changing.

以下是更新的标记：

<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;
}

我把你的小提琴拖到这里演示：
http://jsfiddle.net/MUWhy/4/

I forked your fiddle here to demo: http://jsfiddle.net/MUWhy/4/

UPDATE：

如果您希望标题保持固定，只有文件夹和任务列表的内容滚动，将标题和添加按钮放在#left div内的固定高度框中。这是一个更加标记，但仍然很简单。我没有尝试过JSFiddle，但我认为这将是最好的路线。

If you want the headings to remain fixed and only have the contents of the folder and tasks lists scroll, then I would consider putting the headings and the add buttons in their own fixed-height boxes within the #left div. It's a bit more mark up but still pretty simple. I haven't tried it on JSFiddle but I think that would be the best route to go.

这篇关于CSS3 Flexbox全高应用程序和溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！