绝对flexbox容器的宽度

时间：2018-02-22 15:57:17

标签： html css css3 flexbox

如何让绝对定位的Flex容器根据其内容获取正确的宽度？我已经花了好几个小时与this example但是我们无法弄清问题是什么。这就是我最终得到的结果：

enter image description here

示例中的代码：

＆＃13;
＆＃13; 
.container {
  padding-right: 0;
  padding-left: 0;
  max-width: 1170px;
  margin: 0 auto;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background: white;
}

.nav {
  background: #f8f8f8;
  min-height: 3.57143rem;
}

.nav__root {
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row nowrap;
}

.nav__root ul {
  list-style: none;
  margin: 0;
}

.nav__root li {
  letter-spacing: 1px;
  font-size: 1rem;
  text-align: center;
  line-height: 2.0;
  color: #777;
  font-weight: 100;
}

.nav__root li a {
  color: #777;
}

.nav__root li a:hover {
  color: #333;
}

.nav__dropdown {
  flex: 0 0 auto;
  position: relative;
}

.nav__toggle {
  text-transform: uppercase;
  padding: 1.07143rem;
  display: block;
  position: relative;
}

.nav__menu {
  display: flex;
  flex-flow: row nowrap;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14.28571rem;
  padding: 0.35714rem 0;
  margin: 0.14286rem 0 0;
  font-size: 1rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

.nav__submenu {
  flex: 0 0 auto;
  width: auto;
  margin-right: 1.07143rem;
  margin-left: 1.07143rem;
}

.nav__separator {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

.nav-level--1>li>a {
  text-transform: uppercase;
}
＆＃13; 
<div class="container">
  <nav class="nav">
    <ul class="nav__root">
      <li class="first nav__dropdown">
        <a href="#" class="nav__toggle">
          <strong>Foo</strong>
          <b class="caret"></b>
        </a>
        <ul class="nav__menu">
          <li class="first">
            <a href="#">Foo</a>
          </li>
          <li>
            <a href="#">Bar</a>
          </li>
          <li class="last">
            <a href="#">Baz</a>
          </li>
        </ul>
      </li>
      <li class="nav__dropdown">
        <a href="#" class="nav__toggle">
          <strong>Bar</strong>
          <b class="caret"></b>
        </a>
        <ul class="nav__menu">
          <li class="first nav__submenu">
            <a href="#" class="nav__toggle">
              <strong>Foo</strong>
              <b class="caret"></b>
            </a>
            <ul class="nav-level--2">
              <li class="first">
                <a href="#">Foo Foo Foo Foo </a>
              </li>
              <li>
                <a href="#">Bar Bar Bar Bar </a>
              </li>
              <li class="last">
                <a href="#">Baz Baz Baz Baz </a>
              </li>
            </ul>
          </li>
          <li class="nav__submenu">
            <a href="#" class="nav__toggle">
              <strong>Bar</strong>
              <b class="caret"></b>
            </a>
            <ul class="nav-level--2">
              <li class="first">
                <a href="#">Foo Foo Foo Foo </a>
              </li>
              <li>
                <a href="#">Bar Bar Bar Bar </a>
              </li>
              <li class="last">
                <a href="#">Baz Baz Baz Baz </a>
              </li>
            </ul>
          </li>
          <li class="last nav__submenu">
            <a href="#" class="nav__toggle">
              <strong>Baz</strong>
              <b class="caret"></b>
            </a>
            <ul class="nav-level--2">
              <li class="first">
                <a href="#">Foo Foo Foo Foo </a>
              </li>
              <li>
                <a href="#">Bar Bar Bar Bar </a>
              </li>
              <li class="last">
                <a href="#">Baz Baz Baz Baz </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="last nav__dropdown">
        <a href="#" class="nav__toggle">
          <strong>Baz</strong>
          <b class="caret"></b>
        </a>
        <ul class="nav__menu">
          <li class="first nav__submenu">
            <a href="#" class="nav__toggle">
              <strong>Foo</strong>
              <b class="caret"></b>
            </a>
            <ul class="nav-level--2">
              <li class="first">
                <a href="#">Foo Foo Foo Foo </a>
              </li>
              <li>
                <a href="#">Bar Bar Bar Bar </a>
              </li>
              <li class="last">
                <a href="#">Baz Baz Baz Baz </a>
              </li>
            </ul>
          </li>
          <li class="nav__submenu">
            <a href="#" class="nav__toggle">
              <strong>Bar</strong>
              <b class="caret"></b>
            </a>
            <ul class="nav-level--2">
              <li class="first">
                <a href="#">Foo Foo Foo Foo </a>
              </li>
              <li>
                <a href="#">Bar Bar Bar Bar </a>
              </li>
              <li class="last">
                <a href="#">Baz Baz Baz Baz </a>
              </li>
            </ul>
          </li>
          <li class="last nav__submenu">
            <a href="#" class="nav__toggle">
              <strong>Baz</strong>
              <b class="caret"></b>
            </a>
            <ul class="nav-level--2">
              <li class="first">
                <a href="#">Foo Foo Foo Foo </a>
              </li>
              <li>
                <a href="#">Bar Bar Bar Bar </a>
              </li>
              <li class="last">
                <a href="#">Baz Baz Baz Baz </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

问题在于：

绝对定位元素的包含块是距离最近的祖先。

在这种情况下，这意味着您的下拉菜单（position: absolute）的宽度仅限于主要导航项（position: relative）的宽度。

因此，要使下拉列表超出其包含块，您将要么（1）需要从导航项中删除定位并将其置于更高级别，例如导航栏。但这可能会变得混乱。你需要重新定位所有绝对定位的下拉菜单; （2）增加主要导航项的宽度; （3）尝试不同的方法。

有关CSS定位的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/position

答案 1 :(得分：1)

  

nav__menu，将此属性提供给您的班级.container { padding-right: 0; padding-left: 0; max-width: 1170px; margin: 0 auto; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); background: white; } .nav { background: #f8f8f8; min-height: 3.57143rem; } .nav__root { margin: 0; list-style: none; display: flex; flex-flow: row nowrap; } .nav__root ul { list-style: none; margin: 0; } .nav__root li { letter-spacing: 1px; font-size: 1rem; text-align: center; line-height: 2.0; color: #777; font-weight: 100; } .nav__root li a { color: #777; } .nav__root li a:hover { color: #333; } .nav__dropdown { flex: 0 0 auto; position: relative; } .nav__toggle { text-transform: uppercase; padding: 1.07143rem; display: block; position: relative; } .nav__menu { display: flex; flex-flow: row nowrap; position: absolute; width: max-content; top: 100%; left: 0; min-width: 14.28571rem; padding: 0.35714rem 0; margin: 0.14286rem 0 0; font-size: 1rem; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0 0 4px 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; } .nav__submenu { flex: 0 0 auto; width: auto; margin-right: 1.07143rem; margin-left: 1.07143rem; } .nav__separator { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } .nav-level--1>li>a { text-transform: uppercase; }

这对你来说非常合适。

<div class="container">
  <nav class="nav">

    <ul class="nav__root">

      <li class="first nav__dropdown">

        <a href="#" class="nav__toggle">
          <strong>Foo</strong>
          <b class="caret"></b>
        </a>

        <ul class="nav__menu">

          <li class="first">

            <a href="#">Foo</a>

          </li>

          <li>

            <a href="#">Bar</a>

          </li>

          <li class="last">

            <a href="#">Baz</a>

          </li>

        </ul>

      </li>

      <li class="nav__dropdown">

        <a href="#" class="nav__toggle">
          <strong>Bar</strong>
          <b class="caret"></b>
        </a>

        <ul class="nav__menu">

          <li class="first nav__submenu">

            <a href="#" class="nav__toggle">
              <strong>Foo</strong>
              <b class="caret"></b>
            </a>

            <ul class="nav-level--2">

              <li class="first">

                <a href="#">Foo Foo Foo Foo </a>

              </li>

              <li>

                <a href="#">Bar Bar Bar Bar </a>

              </li>

              <li class="last">

                <a href="#">Baz Baz Baz Baz </a>

              </li>

            </ul>

          </li>

          <li class="nav__submenu">

            <a href="#" class="nav__toggle">
              <strong>Bar</strong>
              <b class="caret"></b>
            </a>

            <ul class="nav-level--2">

              <li class="first">

                <a href="#">Foo Foo Foo Foo </a>

              </li>

              <li>

                <a href="#">Bar Bar Bar Bar </a>

              </li>

              <li class="last">

                <a href="#">Baz Baz Baz Baz </a>

              </li>

            </ul>

          </li>

          <li class="last nav__submenu">

            <a href="#" class="nav__toggle">
              <strong>Baz</strong>
              <b class="caret"></b>
            </a>

            <ul class="nav-level--2">

              <li class="first">

                <a href="#">Foo Foo Foo Foo </a>

              </li>

              <li>

                <a href="#">Bar Bar Bar Bar </a>

              </li>

              <li class="last">

                <a href="#">Baz Baz Baz Baz </a>

              </li>

            </ul>

          </li>

        </ul>

      </li>

      <li class="last nav__dropdown">

        <a href="#" class="nav__toggle">
          <strong>Baz</strong>
          <b class="caret"></b>
        </a>

        <ul class="nav__menu">

          <li class="first nav__submenu">

            <a href="#" class="nav__toggle">
              <strong>Foo</strong>
              <b class="caret"></b>
            </a>

            <ul class="nav-level--2">

              <li class="first">

                <a href="#">Foo Foo Foo Foo </a>

              </li>

              <li>

                <a href="#">Bar Bar Bar Bar </a>

              </li>

              <li class="last">

                <a href="#">Baz Baz Baz Baz </a>

              </li>

            </ul>

          </li>

          <li class="nav__submenu">

            <a href="#" class="nav__toggle">
              <strong>Bar</strong>
              <b class="caret"></b>
            </a>

            <ul class="nav-level--2">

              <li class="first">

                <a href="#">Foo Foo Foo Foo </a>

              </li>

              <li>

                <a href="#">Bar Bar Bar Bar </a>

              </li>

              <li class="last">

                <a href="#">Baz Baz Baz Baz </a>

              </li>

            </ul>

          </li>

          <li class="last nav__submenu">

            <a href="#" class="nav__toggle">
              <strong>Baz</strong>
              <b class="caret"></b>
            </a>

            <ul class="nav-level--2">

              <li class="first">

                <a href="#">Foo Foo Foo Foo </a>

              </li>

              <li>

                <a href="#">Bar Bar Bar Bar </a>

              </li>

              <li class="last">

                <a href="#">Baz Baz Baz Baz </a>

              </li>

            </ul>

          </li>

        </ul>

      </li>

    </ul>

  </nav>
</div>
{{1}}

答案 2 :(得分：0)

我已经通过这种方式解决了问题：后端渲染器会生成类似nav__menu--1，nav__menu--2等类，具体取决于菜单中的列数。另一方面，SASS根据一个菜单栏的宽度为每个类生成特定宽度：

$menu-column-width: rem-calc(200px);

@for $i from 1 through 6 {
  .nav__menu--#{$i} {
    width: $menu-column-width * $i;
  }
}

所以我最终得到了硬编码的宽度，效果很好。

相关问题
最新问题