高度应用程序和溢出

我有一个应用程序使用类似下面的布局的经典电子邮件。

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

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

对于这个问题。 我怎样才能用flexbox构造两个垂直对齐的盒子，使得一个占据可用高度的三分之二（ box-flex 2 ）而另一个占据三分之一（ box-flex 1 ），并且它们以这种方式进行当新内容被添加到第一个盒子时，它不会开始生长，直到它没有空间。

---

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

我找到了一个解决方法，将列表包装在绝对定位的div中，溢出设置为auto。 这允许弹性盒保持它们的原始状态，并且只有当重新计算整个布局而不是内容改变时才改变。

这是更新的标记：

<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/

更新：

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

---

我已经从我的另一个问题得到了这个答案，这是或多或少相同：https://stackoverflow.com/a/14964944/1604261

而不是@ LukeGT解决方案，它是一种解决方法，而不是获得效果的解决方案，您可以将高度应用于要查看垂直滚动的元素。

所以如果你想在垂直滚动中使用最小高度 ，最好的解决方案是 ：

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

如果您只想完整垂直滚动以防万一空间不足以看到文章：

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px; /* or height:0px */
}

如果不设置高度（使用高度或最小高度），则不会设置垂直滚动。 在所有情况下，即使使用height：0px; 元素的计算高度将不同于零。

我的解决方案与-webkit前缀：http://jsfiddle.net/ch7n6/4/

编辑 ：

由于Firefox现在支持完整的Flexbox规范，因此删除-webkit-供应商前缀将可用于所有浏览器。

---

我更喜欢Jim的这个解决方案，因为它没有黑客 - 它可以在页面的任何部分的任何flexbox上工作。 Jim's只能在页面左上方的框中工作。

我通过将我想要在div.scrollbox滚动的flex框的一部分进行包装来解决此问题。 我让这个div的直接子元素的高度为0，因此在其中添加额外的元素不会影响其余的布局。 我还将其overflow-y设置为auto以便在其子级超出其界限时出现滚动条。

.scrollbox {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
}
.scrollbox > * {
    height: 0;
}

请注意，只有当可扩展内容放置在包含元素或包含元素中时，这才会起作用。 在这个例子中， li元素包含在一个包含ul元素中，所以它工作。

为了使左上方的Flexbox的3个组件正确排列，我还必须进行一些更改，但这是特定于应用程序的。

#folders {
    display: -webkit-flex;
    -webkit-flex-flow: column;
}
#folders h2, #folders #add {
    -webkit-flex: 0 1 auto;
}

我在这里分出了上面的jsfiddle：http://jsfiddle.net/FfZFG/。

链接地址: http://www.djcxy.com/p/75639.html

上一篇: height app and overflow

下一篇: how to revert back to normal after display:none for table row