可变宽度的 CSS flexbox 菜单项彼此重叠

Question

我在使用下拉菜单时遇到了一些困难。我正在尝试创建多个彼此相邻且宽度可变的列表。如您所见，对齐本身正在工作：

http://codepen.io/anon/pen/aOrQyw

问题是我似乎无法弄清楚如何准确地将父 div 彼此相邻放置。父 div 现在被放置在彼此之上。这些列表项似乎太长了，这很奇怪，因为我没有为这些项设置宽度。正如我在其他页面上阅读的那样，可能是父 div 位置设置为绝对导致此问题，但我不知道如何解决它。有没有人可以帮我解决这个问题？

代码：

nav {
  background: #e5e7eb;
}

.wrap {
  width: 1200px;
  margin: 0 auto;
}

#primary ul {
  width: 100%;
  height: 48px;
  line-height: 48px;
  position: relative;
  display: inline-table;
  z-index: 100000;
}

#primary ul:after {
  content: "";
  display: block;
  clear: both;
}

#primary ul li {
  padding: 0 0.8333333333333333%;
  display: inline-block;
}

#primary ul li:first-child {
  padding-left: 0;
}

#primary ul li:last-child {
  padding-right: 0;
}

#primary ul li a {
  text-transform: uppercase;
  display: block;
}

#primary ul li > .submenu {
  display: none;
}

#primary ul li:hover > .submenu {
  width: 100%;
  height: 250px;
  background: pink;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: block;
}

#primary ul li > .submenu .outer {
  position: relative;
  display: inline-block;
}

#primary ul li > .submenu .list {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}

#primary ul li > .submenu .list h4 {
  height: 20px;
  line-height: 20px;
  margin: 10px;
  display: block;
}

#primary ul li > .submenu .list h4 a {
  font-size: 1em;
  font-weight: 600;
  text-transform: none;
}

#primary ul li > .submenu .list ul {
  width: 100%;
  height: 210px;
  margin: 0 10px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  align-content: flex-start;
  -webkit-align-content: flex-start;
}

#primary ul li > .submenu .list ul li {
  height: 20px;
  line-height: initial;
  padding: 0;
  margin-right: 40px;
}

#primary ul ul li.title {
  font-weight: 600;
  margin: 0 0 10px 0;
}

<nav>
  <div class="wrap" id="primary">
    <ul>
      <li>Nav 1</li>
      <li><a href="/">Nav 2</a>

        <div class="submenu">
          <div class="outer" style="background: grey;">
            <div class="list ">
              <h4>List 1</h4>
              <ul>
                <li>First item in list 1</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Last item in list 1</li>
              </ul>
            </div>
          </div>

          <div class="outer " style="background: lightgrey; ">
            <div class="list ">
              <h4>List 2 with items</h4>

              <ul>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Last item list 2</li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <li>Nav 3</li>
    </ul>
  </div>
<nav>

提前致谢！

Answer 1

我承认从你的描述中我对这个问题不是很清楚，但我认为这就是你所追求的。

注意：我在无前缀版本中始终使用flexbox。通过单击 CSS 部分中的“查看已编译”按钮，可以在 Codepen 演示中看到前缀版本。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
nav {
  background: lightgrey;
  text-align: center;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
a {
  text-decoration: none;
  color: black;
  font-weight: bold;
  padding: 1em;
  display: block;
}
a:hover {
  background: darkgrey;
  color: white;
}
.menu-top {
  display: inline-flex;
  width: 80%;
  position: relative;
}
.menu-top > li .submenu-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: pink;
  display: none;
  text-align: left;
}
.menu-top > li:hover .submenu-wrap {
  display: flex;
}
.list {
  flex: 0 0 auto;
  background: lightblue;
  margin-right: 1em;
  padding: .5em;
  margin: .5em;
}
.list h4 {
  margin-bottom: .5em;
}

<nav role='navigation'>
  <ul class="menu-top">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
      <div class="submenu-wrap">
        <div class="list">
          <h4>List 1</h4>
          <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
            <li>Item 10</li>
            <li>Item 11</li>
            <li>Item 12</li>
          </ul>
        </div>

        <div class="list">
          <h4>List 2</h4>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Lorem ipsum dolor.</li>
            <li>Item 4</li>
          </ul>
        </div>
      </div>
    </li>
    <li><a href="#">Clients</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
  </ul>
</nav>

Codepen Demo