html - 如果固定高度容器内的内容比容器高度长，有没有办法在 css 中自动创建列？

Question

.subnav {
  background: #efefef;
  padding: 10px 15px;
  display: flex;
}

.navbar-section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 200px;
}

.navbar-section a {
  padding: 10px;
}

<div class="subnav">
  <div class="navbar-section">
    <a href="">Item 1</a>
    <a href="">Item 2</a>
    <a href="">Longer Item 3</a>
    <a href="">Item 4</a>
    <a href="">Item 5</a>
    <a href="">Longer Item 6</a>
    <a href="">Item 7</a>
    <a href="">Item 8</a>
  </div>
  <div class="navbar-section">
    <a href="">Item 1</a>
    <a href="">Longer Item 2</a>
    <a href="">Item 3</a>
    <a href="">Longer Item 4</a>
    <a href="">Item 5</a>
    <a href="">Longer Item 6</a>
    <a href="">Item 7</a>
    <a href="">Longer Item 8</a>
  </div>
</div>

我正在 Wordpress 中创建一个大型菜单，我正在尝试找出一种方法来在子菜单具有最大高度时自动创建列。

如果我使用 flexbox，由于某种原因它不会缩放容器的宽度。这会导致内容与下一列重叠。

display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;

我也尝试过使用 CSS 网格，但这似乎不起作用，因为网格项的高度各不相同，导致每个导航项之间出现空间。

https://codepen.io/calvinbramlett/pen/opVqov

.navbar-dropdown {
  background: #efefef;
  padding: 20px 30px 40px;
  display: flex;
  /*justify-content: flex-start;
	align-items: flex-start;*/
}

.navbar-title {
  text-transform: uppercase;
  font-weight: bold;
}

.navbar-item {
  padding: 8px 10px;
  max-width: 180px
}

.navbar-item:hover {
  background: #ddd;
}

.navbar-dropdown-items {
  /*display: flex;
  flex-wrap: wrap;
  flex-direction: column;*/
  margin-left: -10px;
  min-height: 75px;
  display: grid;
  grid-gap: 10px;
  grid-template-rows: max-content max-content max-content;
  grid-auto-flow: column;
}

.navbar-section {
  /*flex: 1;*/
}

<div class="navbar-dropdown">
  <div class="navbar-section">
    <p class="navbar-title">Section title</p>
    <div class="navbar-dropdown-items">
      <a class="navbar-item" href="">Central Arkansas Library System</a>
      <a class="navbar-item" href="">Butler Center</a>
      <a class="navbar-item" href="">River Market Books &amp; Gifts</a>
      <a class="navbar-item" href="">Hillary Rodham Clinton Children's Library &amp; Learning Center</a>
    </div>
  </div>
  <div class="navbar-section">
    <p class="navbar-title">Section Title</p>
    <div class="navbar-dropdown-items">
      <a class="navbar-item" href="">Main Library</a>
      <a class="navbar-item" href="">Millie Brooks</a>
      <a class="navbar-item" href="">Dee Brown</a>
      <a class="navbar-item" href="">John Gould Fletcher</a>
      <a class="navbar-item" href="">Maumelle</a>
      <a class="navbar-item" href="">Sidney S. McMath</a>
      <a class="navbar-item" href="">Max Milam</a>
      <a class="navbar-item" href="">Esther Dewitt Nixon</a>
      <a class="navbar-item" href="">Oley E. Rooker</a>
      <a class="navbar-item" href="">Amy Sanders</a>
      <a class="navbar-item" href="">Adolphine Fletcher Terry</a>
      <a class="navbar-item" href="">Roosevelt Thompson</a>
    </div>
  </div>
</div>

我刚刚开始学习网格，所以我还不知道它的所有功能，所以可能有一种我不知道的方法。非常感谢任何帮助或建议。

Answer 1

为了达到预期的结果，设置类的宽度 - subnav 和 navbar-section

.subnav {
  background: #efefef;
  padding: 10px 15px;
  display: flex;
  width:50%;
}

.navbar-section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 200px;
  border:1px solid black;
  width:100%;
}

代码示例 - https://codepen.io/nagasai/pen/ZxwEGX

.subnav {
  background: #efefef;
  padding: 10px 15px;
  display: flex;
  width:50%;
}

.navbar-section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 200px;
  border:1px solid black;
  width:100%;
}

.navbar-section a {
  padding: 10px;
}

<div class="subnav">
  <div class="navbar-section">
    <a href="">Item 1</a>
    <a href="">Item 2</a>
    <a href="">Longer Item 3</a>
    <a href="">Item 4</a>
    <a href="">Item 5</a>
    <a href="">Longer Item 6</a>
    <a href="">Item 7</a>
    <a href="">Item 8</a>
  </div>
  <div class="navbar-section">
    <a href="">Item 1</a>
    <a href="">Longer Item 2</a>
    <a href="">Item 3</a>
    <a href="">Longer Item 4</a>
    <a href="">Item 5</a>
    <a href="">Longer Item 6</a>
    <a href="">Item 7</a>
    <a href="">Longer Item 8</a>
  </div>
</div>