基于百分比高度行为的Chrome Flexbox不正确

Question

我有一个带有2个列表的flexbox。 Flexbox位于绝对定位的父级中，具有定义的高度。顶部列表中的项目对我来说更重要，所以我希望它们先增长并最后得到滚动条。底部列表应该最后增长并首先获取滚动条。

因此，换句话说，我想要的行为是：

1. 如果两个列表中的项目太多，底部名单应在最小高度W/A滚动条和顶部列表应填写剩余带滚动条的空间。

2. 如果底部列表中的项目太多，它应该填充顶部列表未使用的所有空间，然后获取滚动条。

3. 如果顶部列表中的条目太多，行为与＃1相同，并且底部列表如果不需要滚动条，则不必具有滚动条。

你会在这里找到正确的行为。特别是来自Microsoft Edge，但一般来自“非Chrome”

Chrome无法重新创建情境＃1。它将使名单长得比母公司更高不管我做什么：

的的jsfiddle用于创建截图在这里。 https://jsfiddle.net/drLs8tgo/我欣赏任何建议，以获得我想要的行为。

<div class="layout"> 
    <div class="flexContainer"> 
    <div class="grow"> 
     <div class="growHeader"> 
     Important Items 
     </div> 
     <div class="growBody"> 
     <ul id="growList"> 
      <li>Grow</li> 
      <li>Grow</li> 
      <li>Grow</li> 
      <li>Grow</li> 
      <li>Grow</li> 
      <li>Grow</li> 
      <li>Grow</li> 
      <li>Grow</li> 
     </div> 
    </div> 
    <div class="shrink"> 
     <div class="shrinkHeader"> 
     Some Items 
     </div> 
     <div class="shrinkBody"> 
     <ul id="shrinkList"> 
      <li>Shrink</li> 
      <li>Shrink</li> 
      <li>Shrink</li> 
      <li>Shrink</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="toolbar"> 
    <button id="growAdd">Add Grow Item</button> 
    <button id="growRemove">Remove Grow Item</button> 
    <button id="shrinkAdd">Add Shrink Item</button> 
    <button id="shrinkRemove">Remove Shrink Item</button> 
</div> 

而CSS：

div.layout { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 500px; 
    width: 400px; 
} 

div.flexContainer { 
    display: flex; 
    height: 100%; 
    max-height: 100%; 
    flex-direction: column; 
} 

div.grow { 
    flex: 0 1 auto; 
    height: auto; 
    max-height: calc(100% - 120px); 
} 

div.shrink { 
    height: auto; 
    flex: 1 0 0px; 
    height: auto; 
    min-height: 120px; 
} 

div.growHeader, 
div.shrinkHeader { 
    background: grey; 
    height: 40px; 
} 

div.growBody, 
div.shrinkBody { 
height: calc(100% - 40px); 
max-height: calc(100% - 40px); 
overflow: auto; 

    > ul { 
    max-height: 100%; 
    } 
} 

div.toolbar { 
    position: absolute; 
    border: 2px solid black; 
    top: 500px; 
    left: 0; 
} 

Answer 1

如果使.grow和.shrink物品也Flex容器，就可以实现这一点。

Fiddle demo

var growAdd = document.getElementById('growAdd'); 
 
var growRemove = document.getElementById('growRemove'); 
 
var shrinkAdd = document.getElementById('shrinkAdd'); 
 
var shrinkRemove = document.getElementById('shrinkRemove'); 
 
growAdd.addEventListener("click", addGrowElement, false); 
 
growRemove.addEventListener("click", removeGrowElement, false); 
 
shrinkAdd.addEventListener("click", addShrinkElement, false); 
 
shrinkRemove.addEventListener("click", removeShrinkElement, false); 
 

 
function addGrowElement() { 
 
    var olList = document.getElementById('growList'); 
 
    var newListItem = document.createElement('li'); 
 
    newListItem.innerText = 'Grow'; 
 
    olList.appendChild(newListItem); 
 
} 
 

 
function removeGrowElement() { 
 
    var olList = document.getElementById('growList'); 
 
    olList.removeChild(olList.children[0]); 
 
} 
 

 
function addShrinkElement() { 
 
    var olList = document.getElementById('shrinkList'); 
 
    var newListItem = document.createElement('li'); 
 
    newListItem.innerText = 'Shrink'; 
 
    olList.appendChild(newListItem); 
 
} 
 

 
function removeShrinkElement() { 
 
    var olList = document.getElementById('shrinkList'); 
 
    olList.removeChild(olList.children[0]); 
 
}

div.layout { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 500px; 
 
    width: 400px; 
 
} 
 

 
div.flexContainer { 
 
    display: flex; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    flex-direction: column; 
 
} 
 

 
div.grow { 
 
    flex: 0 1 auto; 
 
    max-height: calc(100% - 120px); 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
div.shrink { 
 
    flex: 1 0 0px; 
 
    min-height: 120px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
div.growHeader, 
 
div.shrinkHeader { 
 
    flex-shrink: 0; 
 
    background: grey; 
 
    height: 40px; 
 
} 
 

 
div.growBody, 
 
div.shrinkBody { 
 
flex-grow: 1; 
 
overflow: auto; 
 
} 
 

 
div.toolbar { 
 
    position: absolute; 
 
    border: 2px solid black; 
 
    top: 500px; 
 
    left: 0; 
 
}

<div class="layout"> 
 
    <div class="flexContainer"> 
 
    <div class="grow"> 
 
     <div class="growHeader"> 
 
     Important Items 
 
     </div> 
 
     <div class="growBody"> 
 
     <ul id="growList"> 
 
      <li>Grow</li> 
 
      <li>Grow</li> 
 
      <li>Grow</li> 
 
      <li>Grow</li> 
 
      <li>Grow</li> 
 
      <li>Grow</li> 
 
      <li>Grow</li> 
 
      <li>Grow</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="shrink"> 
 
     <div class="shrinkHeader"> 
 
     Some Items 
 
     </div> 
 
     <div class="shrinkBody"> 
 
     <ul id="shrinkList"> 
 
      <li>Shrink</li> 
 
      <li>Shrink</li> 
 
      <li>Shrink</li> 
 
      <li>Shrink</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="toolbar"> 
 
    <button id="growAdd">Add Grow Item</button> 
 
    <button id="growRemove">Remove Grow Item</button> 
 
    <button id="shrinkAdd">Add Shrink Item</button> 
 
    <button id="shrinkRemove">Remove Shrink Item</button> 
 
</div>