让身高变得动态

Question

我有outerWrapper，innerWrapper和孩子。 outerWrapper的高度为300px，且为display: flex。 innerWrapper也是display: flex，flex-direction: column。 innerWrapper没有设置高度。

当我将align-items:的值除strecth outerWrapper添加到300px时，子项会显示一个长列。他们忽略innerWrapper.style.height = (lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight) + 'px'; 身高。这是描述它的图像：

什么时候应该是这样的：

如果我设置了一个高度，我将得到第二张图片。即我希望它的样子。我无法设置一个固定的高度，它需要是动态的。

我尝试了以下内容：

innerWrapper

但它没有解决它。它的高度只有：5 * 102（5 =方框数; 102 =高度+边框）。

如何将动态高度设置为height: 100%？ （我无法align-items: flex-end，因为我无法设置center或var innerWrapper = document.getElementById('innerWrapper'); var lastChild = innerWrapper.lastElementChild; newHight = lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight; innerWrapper.style.height = newHight + 'px';。）

JSFiddle

＆＃13;

＆＃13;

#outerWrapper {
  height: 300px;
  background-color: lightgreen;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  /*height: 206px;*/
}
li {
  list-style-type: none;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid;
}

＆＃13;

<div id="outerWrapper">
  <ul id="innerWrapper">
    <li class="child">I'm #01</li>
    <li class="child">I'm #02</li>
    <li class="child">I'm #03</li>
    <li class="child">I'm #04</li>
    <li class="child">I'm #05</li>
  </ul>
</div>

＆＃13;

.menu img {
  height:1em;
}

＆＃13;

＆＃13;

＆＃13;

更新

我不认为这是this question的副本。这是一个后续问题。