正在隐藏最大宽度为0的元素

Question

有一个li元素我想隐藏它，这样以后我就可以应用特殊的向外扩展的过渡效果。然而，我仍然无法理解为什么最大宽度：0在这种情况下有效，而宽度：0则无效(占用的空间消失了(。我在开发工具中检查了width、最大宽度和最小宽度in-width默认为auto，大于width=和max-width的0值。根据MDN上的规范，最小宽度：auto不应该获胜吗？(这意味着最大宽度：0不应该有任何效果(
这是代码笔的链接

&__logo {
color: black;
// width:0 doesn't work
max-width: 0;
overflow: hidden;
background: white;
transition: all 0.5s;
font-weight: 600;
font-size: 30px;
}

Answer 1

这个flex属性扰乱了您在这里尝试做的事情

&__list-item {
text-align: center;
display: flex;
/* flex: 1; */   
//if you comment out the line above it should work 
fine i guess
justify-content: center;
align-items: center;

}