要保持 flexbox 容器和溢出的子元素在100%高度内，可以使用以下代码示例来解决：

HTML:

  
Item 1
  
Item 2
  
Item 3
  
Item 4

CSS:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置容器高度为100%视窗高度 */
  overflow: auto; /* 添加滚动条，当内容溢出容器时显示滚动条 */
}

.item {
  flex: 0 0 auto; /* 子元素不会自动拉伸或收缩 */
  height: 100%; /* 子元素高度为100%容器高度 */
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

在上面的代码中，我们首先将容器的高度设置为100%视窗高度（height: 100vh）。然后，通过设置子元素的高度为100%容器高度（height: 100%），确保子元素在容器内占满整个高度。如果子元素的内容超出容器的高度，将会显示滚动条（overflow: auto）。

注意，flexbox 容器的 flex-direction 属性被设置为 column，以确保子元素垂直排列。