css垂直按钮组-忽略对齐内容

Question

我希望在一个容器中有一组垂直间隔的按钮(遵循css flex样式的空格(。下面是完整的html部分，它展示了我遇到的问题-无论我尝试过什么，按钮总是从容器的顶部构建(就像flex start一样((下面的"容器"风格只是设置了一个任意的、固定大小的容器，我希望按钮(单独和一起的高度都小于容器(垂直堆叠，如前所述。)

我不确定展示的目的：遮挡；在类别邻接内(存在/不存在似乎没有影响。(

.container {
border: 1px solid black;
height: 250px;
width: 200px;
}
.buttons {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.abutton {
border: 1px solid red;
color: blue;
height: 30px;
width: 100px;
display: block;
}

<div class="container" >
<div class="buttons">
<button class = "abutton">Button 1</button>
<button class = "abutton">Button 2</button>
<button class = "abutton">Button 3</button>
<button class = "abutton">Button 4</button>
</div>
</div>

谢谢。

Answer 1

在.buttons中添加宽度：100%和高度：100%；从而填满整个容器空间：

.buttons {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-around;
width: 100%;
}

工作示例：

.container {
border: 1px solid black;
height: 250px;
width: 200px;
}
.buttons {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-around;
width: 100%;
}
.abutton {
border: 1px solid red;
color: blue;
height: 30px;
width: 100px;
display: block;
}

<div class="container" >
<div class="buttons">
<button class = "abutton">Button 1</button>
<button class = "abutton">Button 2</button>
<button class = "abutton">Button 3</button>
<button class = "abutton">Button 4</button>
</div>
</div>