HH123_3 2023-12-16 11:27 采纳率: 86.8%
浏览 2
已结题

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

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

项目在线预览
项目github地址

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

img

div.device的大小是300 x 400

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

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

img

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

  • 写回答

1条回答 默认 最新

  • HH123_3 2023-12-16 14:11
    关注

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

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

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

    评论

报告相同问题?

问题事件

  • 系统已结题 12月24日
  • 创建了问题 12月16日

悬赏问题

  • ¥20 有偿,学生成绩信息管理系统
  • ¥15 Arduino电机和openmv连接异常
  • ¥15 Arcgis河网分级报错
  • ¥200 java+appium2.1+idea
  • ¥20 请帮我做一个EXE的去重TXT文本
  • ¥15 工价表引用工艺路线,应如何制作py和xml文件
  • ¥15 根据历史数据,推荐问题类型
  • ¥15 需要仿真图,简单的二阶系统实例
  • ¥15 stm32光控照明仿真
  • ¥15 使用人工智能的方法生成满足一定统计参数要求的随机数序列