Is there a way to automatically create columns in css if the content inside a fixed height container is longer than the containers height?

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>

I'm creating a mega menu in Wordpress and I'm trying to figure out a way to automatically create columns if the submenu has a max height.

If I use flexbox it doesn't scale the width of the container for some reason. This causes the content to overlap with the next column.

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

I've tried using CSS Grid as well, but that doesn't seem to work because the height of the grid items vary causing the appearance of space between each nav item.

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>

I am just now learning grid, so I don't know all of it's capabilities just yet, so there may be a way that I just don't know about. Any help or advice would be very appreciated.

Possible duplicate of [When flexbox items wrap in column mode, container does not grow its width](https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width) — Vadim Ovchinnikov, Apr 10 '18 at 08:13
@CalvinBramlett The root of your issue is described [here](https://stackoverflow.com/q/33891709/1548895). The only CSS workaround I've found is [this](https://stackoverflow.com/a/41209546/1548895). — Vadim Ovchinnikov, Apr 10 '18 at 08:16

Naga Sai A · Answer 1 · 2018-04-10T14:34:16.873

-1

To achieve expected result, set width for classes- subnav and 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%;
}

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

edited Apr 10 '18 at 14:34

answered Apr 09 '18 at 20:10

Naga Sai A

10,771
1
21
40

Have you seen overlapping in your answer in Chrome? – Vadim Ovchinnikov Apr 10 '18 at 08:30
I dont see any overlapping in chrome , I have attached screenshot as well – Naga Sai A Apr 10 '18 at 14:33
@Calvin Bramlett, are you seeing overlap from your side too in chrome - https://codepen.io/nagasai/pen/ZxwEGX?? – Naga Sai A Apr 10 '18 at 15:24
weird @VadimOvchinnikov, I am using Chrome Version 65.0.3325.181 and just forked the same codepen which SO mentioned in question and just added width – Naga Sai A Apr 10 '18 at 19:30
@Calvin Bramlett, are you still facing issue ? – Naga Sai A Sep 30 '19 at 21:09

Is there a way to automatically create columns in css if the content inside a fixed height container is longer than the containers height?

1 Answers1