flexbox容器的絕對寬度

Question

如何獲取一個絕對位置的flex容器以根據其內容獲取正確的寬度？ 我已經花了幾個小時來研究這個例子，但是還不能弄清楚問題出在哪里。 這就是我最終得到的結果：

示例中的代碼：

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

Answer 1

這是問題所在：

絕對定位元素的包含塊是最接近定位的祖先。

在這種情況下，這意味着下拉菜單的寬度（ position: absolute ）被限制在主要導航項的寬度（ position: relative ）中。

因此，為使下拉菜單擴展到其包含的塊之外，您將（1）需要從導航項中刪除定位並將其放置在較高的位置，例如導航欄。 但這可能會變得混亂。 您需要重新定位所有絕對定位的下拉菜單； （2）在主導航項上增加寬度； （3）嘗試不同的方法。

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

Answer 2

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> 

Answer 3

我已經通過以下方式解決了這個問題：后端渲染器根據菜單中的列數生成類似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;
  }
}

因此，我最終得到了硬編碼的寬度，效果很好。