Question

我有一个带有自定义div的按钮。我需要将按钮作为flex容器，并将div作为flex元素（即，它们都需要具有“ display：flex”样式），因为该div在水平行上将具有其他同级元素，并且所有它们都将被占用按钮内部的水平空间以不同的方式（某些比例固定，一些固定）。

现在，我需要使该div垂直拉伸以占据按钮中的所有垂直空间。我认为使用align-self：在该div上拉伸就足够了，但是Chrome浏览器并不同意，而Firefox同意。

有人知道为什么吗？

这似乎与每个浏览器中捆绑的某些特定于用户代理的股票样式有关，并且在不同的浏览器中有所不同，但是我无法弄清楚需要/需要手动应用/使用哪些特定样式/样式/取消按钮元素上的设置。

以下简单页面显示了Chrome上的问题，而不是Firefox上的问题。

body {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  justify-content: center;
}

body>div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.outer {
  border: 0;
  box-sizing: border-box;
  display: flex;
  width: 400px;
  height: 150px;
  background-color: red;
  padding: 10px;
}

.inner {
  display: flex;
  align-self: stretch;
  background-color: blue;
  flex: 1 1 100%;
}

<div>
  here is a button:
  <button class="outer">
			<div class="inner">
			</div>
		</button> and here is a div:
  <div class="outer">
    <div class="inner">
    </div>
  </div>

为什么Chrome中的<button>元素在其子元素上不使用“ align-items：stretch”？

0 个答案: