<button>上的"display:flex"与<span>上的"display:flex"

Question

我有关于计算柔性容器宽度的问题.在这方面,该元素似乎与其他元素的行为不同.

如果我将样式添加"display: flex"到<span>包含文本的元素,则它占用其父元素宽度的100%.

如果我向<button>元素添加相同的样式,则根据其文本内容计算其宽度.

这是怎么回事？<button>元素上的哪个(隐式)CSS规则会产生这种行为？我怎样才能在两种行为之间切换？

(我已经在Firefox和Chrome中对此进行了测试.我也可以使用<div>而不是<span>.)

Answer 1

display: flex虽然按钮及其弹性儿童的行为有问题,但在基于webkit的浏览器(如Chrome和Safari)中的按钮上工作有一定程度.它在Firefox中根本不起作用,这在技术上可能是正确的行为 - 这是一个相关的错误报告.

如果要display: flex在按钮上使用,请将属性放在子div上.要使按钮拉伸以适合其父级,请提供它width: 100%;.

button {
  display: block;
  width: 100%;
  padding: 10px;
}
button > div {
  display: flex;
}
button > div > div {
  flex: 2;
  background: #F00;
}
button > div > div:first-child {
  background: #F90;
  flex: 1;
}

<button>
  <div>
    <div>Hello, I am button div 1</div>
    <div>Hello, I am button div 2</div>
  </div>
</button>