如何在布局中展开嵌套容器？

<div class="container">
  <div class="nested-container">Nested Container 1</div>
  <div class="nested-container">Nested Container 2</div>
  <div class="nested-container">Nested Container 3</div>
</div>

.container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

.nested-container {
  flex: 1; /* 子元素平均分配容器空间 */
}

<div class="container">
  <div class="nested-container">Nested Container 1</div>
  <div class="nested-container">Nested Container 2</div>
  <div class="nested-container">Nested Container 3</div>
</div>

.container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr; /* 三行等高 */
}

.nested-container {
  /* 子元素自由布局在网格中 */
}