阅读gui-challenges项目遇到的问题2(tabs)：去掉了父元素overflow: hidden；并且子元素的宽度要比父元素宽为什么没有溢出呢？

Question

阅读gui-challenges项目遇到的问题2(tabs)：去掉了父元素overflow: hidden；并且子元素的宽度要比父元素宽为什么没有溢出呢？

项目在线预览
项目github地址

首先去掉div.device上的overflow:hidden;

div.device的大小是300 x 400

它有两个子元素nav和snap-tabs，我们看snap-tabs的宽度有没有超过其父元素的宽度

• snap-tabs的宽度没有显式设置width，故其宽度取决于其子元素(header, section)的宽度
  • header的宽度没有显式设置width，故其宽度取决于其子元素(nav的宽度`)
    • nav的宽度没有显式设置width，故其宽度取决于其子元素(a的宽度`)
      • 这几个a的宽度要大于device的宽度的

但是却没有溢出，问题到底处在哪呢？我发现在snp-tabs上也设置了overflow: hidden; 是受这个影响吗？那么snap-tabs的宽度又是怎么确定的？如果是由其子元素确定的，overflow:hidden;应该是没用的啊？那如果由它的父元素决定米那不就陷入死循环了吗？

Answer 1

我好像明白了。
如果flex子元素在副轴方向上的大小为auto，那么它会拉伸到和父元素在该方向上的大小（如果父元素在该方向上设置了大小的话，和它的内容大小没有关系）或者全部子元素自身大小在该方向上的最大值（如果父元素在该方向上没有设置大小）。这里有一个在线的例子，可以自己试一下。

在这里snap-tabs的宽度就是.device的宽度，在它上面设置了overflow: hidden;所以没有溢出。

其实，我觉的这里的device上的overflow: hidden；好像没有用，去掉也没有影响。