div 盒子中有多个子元素 要求子元素宽度为父元素的100%，沿纵向排列 均分父元素的高度 请问css 样式该如何书写

为了实现这个布局，你需要使用CSS的`display`, `flexbox` 或者 `grid` 属性，这里分别介绍两种方法：

**使用 Flexbox:**

.parent-div {
  display: flex;
  flex-direction: column; /* 纵向排列 */
  justify-content: space-between; /* 子元素均分高度 */
}

.child-elements {
  width: 100%;
  flex-grow: 1; /* 自动分配剩余空间，保证宽度为100% */
}

在这个例子中，`.parent-div` 是父容器，`.child-elements` 是所有子元素的类名。`flex-grow: 1` 表示每个 `.child-elements` 都可以增长到可用空间的100%，前提是它们的总和不超过1。

**使用 Grid:**

.parent-div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr)); /* 沿纵轴填满并保持宽度100% */
  gap: 1rem; /* 定义子元素之间的间距 */
  height: auto; /* 父元素高度自适应 */
}

.child-elements {
  background-color: /* 选择你喜欢的颜色 */;
}

这里的 `grid-template-columns` 使用 `minmax(0, 1fr)` 确保每个子元素占据一行，并保持宽度为父元素的一份。

**相关问题--:**
1. 如果子元素内容动态变化导致高度不再均匀，这两种方法应该如何处理？
2. 如果想要在垂直方向添加滚动条，应该怎么做？
3. 如果需要让子元素之间不等距排列，使用哪种方法更好？