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

Question

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

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

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

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

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

您将在此处找到正确的行为。特别是来自Microsoft Edge，但通常来自＆＃34; Not Chrome＆＃34;

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>