6-4 css .main的overflow异常

Question

您好老师，我遇到一个问题就是6-4结尾处
我加上以上代码以后发现overflow没有生效
以下是我浏览器里的css

app-root高度显示正确

app-home-container和它的子元素main的高度异常，并且main的高度计算calc(100% - 3rem)没有生效

打开页面看不到footer，划到下面tabbar又消失了

代码和教程源代码一摸一样，并且我也下载了git里的源代码发现也是同样的问题，请问老师这个问题应该怎么解决，十分谢谢！

Answer 1

接灰的电子产品 2020-02-05 01:17:08

嗯，可以在 src/app/home/components/home-container/home-container.component.css 的给 :host 添加一个 overflow-y:hidden

:host {
display: flex;
flex-direction: column;
align-items: stretch;
flex: 1;
overflow-y: hidden;
}

• 提问者 weixin_慕慕8136048 #1

  谢谢老师，加上这句就对了。请问可以给我解释下这里的原理吗，我不太懂为什么这里不加“overflow-y: hidden;”的话flex：1就没有效果

• 接灰的电子产品 #2

  flex：1 一直有效的啊，他就是要占满空间，只不过是要哪一层可滚动，设置overflow：hidden 就是这个组件自己不可滚动

• 提问者 weixin_慕慕8136048 #3

  十分感谢你的解答！