css - 为什么它在 Material 设计中不采用 100% 的高度？

Question

嗨，你能告诉我为什么它在 Material 设计中没有采用 100% 的高度吗？这是我的代码 https://codesandbox.io/s/m34pw4km2x

 toolbar__logo: {
    backgroundColor: "#db3131",
    width: "250px",
    height: "100%"
  }

react 代码

<Fragment>
        <AppBar position="static" className={classes.mainHeader}>
          <Toolbar className={classes.toolbar}>
            <div className={classes.toolbar__logo}>a</div>
            <div>b</div>
            <div>c</div>
          </Toolbar>
        </AppBar>
      </Fragment>

预期代码

“文本a”将覆盖父div的整个高度

Answer 1

toolbar__logo: {
    width: 250px;
    height: 100%;
    background-color: #db3131;
    align-self: stretch;
}

请使用此代码。希望它对你有用。类似@Abhishek Anand 的相同解决方案已在下面发布。您正在使用 flex 属性，因此您显示给 CSS 属性 align-self:stretch;到子元素