为什么 100% 宽度在 Flex / 显示块上会被破坏？

Question

我正在努力在 PicoCSS 中创建响应式汉堡菜单，如 this codepen 所示。在小型设备 (

width < 48em

) 上时，我希望弹出菜单的锚标记占据封闭的

标记的全宽。为了实现这一点，我想使用以下 CSS：

      & a {
        display: block;
        width: 100%;
      }

但是，使用

100%

会导致几乎相反的情况发生……它可能只消耗 5% 的宽度，甚至导致文本自动换行。

因此，我必须接受以下改变：

      & a {
        display: block;
        /* don't know why a "100%" breaks this */
        width: 28em;
      }

上面的创可贴几乎有效。如果我流畅地调整屏幕宽度，我可以看到菜单链接“悬停”或“选择”的小范围不足或超出范围，以及不需要的边距“折叠”。

我觉得如果只有

100%

设置有效就最好了。关于为什么这不起作用的任何想法？我想确保菜单选项可以“悬停”或在菜单的整个宽度上显示“选定”。

参考框架对于负边距 x 是错误的（现在的现代框架通常不会伪造这一点，但像 bootstrap 这样的旧东西会这样做）将其添加到

@media

：

& >ul.menu {
      .item {
        box-sizing: content-box;
      }
      & a {
        display: block;
        /* don't know why a "100%" breaks this */
        width: 100%;
      }
      & a:hover {
        background-color: yellow;
      }
}

Answer 1

参考框架对于负边距 x 是错误的（现在的现代框架通常不会伪造这一点，但像 bootstrap 这样的旧东西会这样做）将其添加到

@media

：

& >ul.menu {
      .item {
        box-sizing: content-box;
      }
      & a {
        display: block;
        /* don't know why a "100%" breaks this */
        width: 100%;
      }
      & a:hover {
        background-color: yellow;
      }
}