利用CSS网格占用剩余空间

Question

所以基本上我正在尝试创建类似这样的东西。 https://prnt.sc/pgajpk 我有固定高度的包装纸，我想确保所有子元素都占用剩余空间，但它们必须堆叠在一起。这就是我到目前为止所拥有的。

ul {
  display: grid;
  height: 500px;
  grid-gap: 10px;
}

li {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

<ul>
  <li>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
</ul>