代码之家 › 专栏 › 技术社区 › super.t

flexbox容器的绝对宽度

flexbox css html

-1

super.t · 技术社区 · 6 年前

如何让绝对定位的flex容器根据其内容采用正确的宽度?我花了几个小时 this example 但还没能弄清楚问题出在哪里。这就是我的结局:

示例中的代码:

.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;
}

<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>

3 回复 | 直到 6 年前

Michael Benjamin 6 年前

问题是:

这个 包含块 一个绝对定位的元素的最接近的定位祖先。

在这种情况下,这意味着下拉菜单的宽度( position: absolute )仅限于主要导航项目的宽度( position: relative ).

因此,要使下拉列表扩展到其包含的块之外,您需要(1)从导航项目中删除定位,并将其放置在更高的级别,例如导航栏。但这可能会变得一团糟。您需要重新定位所有绝对定位的下拉列表;(2) 增加主导航项目的宽度;(3) 尝试其他方法。

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

Dhaval Jardosh 6 年前

width:max-content ,将此属性赋予您的类 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>

super.t 6 年前

我这样解决了这个问题:后端渲染器生成如下类 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;
  }
}

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