文章/答案/技术大牛

发布

社区首页 >问答首页 >不能在Chrome中将柔性盒儿童的高度设置为100%

问不能在Chrome中将柔性盒儿童的高度设置为100%
EN

Stack Overflow用户

提问于 2019-09-19 12:25:44

回答 1查看 94关注 0票数 0

我试着让下面的蓝色盒子填满按钮的整个高度，但它似乎不起作用。为什么height: 100%不适用于.el元素？

button {
  background: red;
  height: 55px;
  display: flex;
  align-items: center;
}

.el {
  display: block;
  background: blue;
  height: 100%;
}

<button>
  <span class="el">
    Content
  </span>
  Other
</button>

输出(Chrome 76)：

其他浏览器似乎显示了预期的结果

边缘：

Firefox：

发布于 2019-09-19 12:32:30

试一试

.el {
  display: block;
  background: blue;
  height: inherit;
}

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58011010

复制

相似问题

问不能在Chrome中将柔性盒儿童的高度设置为100%EN