javascript - Flex 布局 - 单元格在 chrome 中部分折叠

Question

所以我在 Chrome(Mac 上的最新版本)中遇到了一些奇怪的问题。这是复制它的 fiddle :http://jsfiddle.net/mwznjnoc/1/

您会看到搜索栏的高度设置为 40 像素。但是，一旦右侧的红色单元格包含使其滚动的内容，它就会挤压搜索栏。将搜索栏移到它所在的 div 之外和标题 div 下可以解决这个问题，但我不能那样解决(搜索栏是 View 内容的一部分，它在它所在的 div 中呈现)。从 html 和正文中删除 height: 100%; 会阻止它发生，但这不是解决方法，因为我需要视口(viewport)高度为 100%。此布局在我测试过的其他浏览器中工作正常，任何人都知道为什么会发生这种情况或调整布局以防止它发生的方法吗？感谢您提前抽出时间!

Answer 1

您忘记了 .search 框中的 flex 规则。

1. 因为它是 flex 的一部分，所以您应该从 .search 框中删除样式 height:40px。
2. 然后提供flex-grow和flex-shrink作为0，flex-basis作为 >40px.
3. 您可以将所有三个组合为一个，如 flex: 0 0 40px。这将强制布局在 40px 内包含 .search 框，并让其他 block 在可用空间中增长或收缩。

HTML 标记的变化:

<div class="search">search bar</div> <!-- Remove inline style for height -->

CSS 的变化:

.search {
    flex: 0 0 40px;    /* add the flex rule here */
    background: #ccc;
}

您的 fiddle :http://jsfiddle.net/abhitalks/mwznjnoc/3/