具有基于百分比的高度行为的 Chrome flexbox 不正确 [重复]

Question

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

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

1. 如果两个列表中的项目太多，则底部列表应位于带有滚动条的最小高度，顶部列表应使用滚动条填充剩余空间。

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 项目也成为弹性容器，您可以实现这一点。

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>