如何使flexbox中的第一个按钮与第二个按钮大小相同

Question

如何使第一个按钮与第二个按钮大小相同？与按钮所在的内容无关。P.S.按钮的固定宽度不适合

.box {
display: flex;
flex-direction: column;
width: max-content;
}
.box button{
width: 100%;
}

<div class="box">
<div class="one">
<h2>long header</h2>
<button>Abcde</button>
</div>
<div class="two">
<h2>head</h2>
<button>Abcde12321</button>
</div>
</div>

Answer 1

如果您希望按钮的宽度与最大按钮的宽度相同：将父宽度设置为：max-content，将子宽度设置为width: 100%;

.box {
display: flex;
flex-direction: column;
width: max-content;
}
.box button{
width: 100%;
}

Codepen

您还可以将它们的宽度(或父对象的宽度(设置为固定值，如下所示。

Ps：你也可以使用flex。