宽度css属性不适用于flex父级内的项

Question

我是CSS新手，我希望按钮更宽，它们看起来很窄，我该如何实现这一点？它们应该看起来像容器没有显示伸缩

.container {
display: flex;
max-width: 300px;
overflow-y: auto;
}
.container button {
width: 500px
}

<div class="container">
<button>Button #0</button>
<button>Button #1</button>
<button>Button #2</button>
<button>Button #3</button>
<button>Button #4</button>
<button>Button #5</button>
</div>

Answer 1

您必须在按钮CSS中使用flex-shrink: 0。

.container {
display: flex;
max-width: 300px;
overflow-y: auto;
}
.container button {
width: 500px;
flex-shrink: 0;
}