Element with a child element that has flex-direction: column and max-height; width not expanding when items wrap

Question

I have a nav menu with submenus that show when li elements are hovered.

See below HTML/CSS (hover over Nav 1 to see the issue). The .submenu element has a max-height and is set as flex-direction: column, but I want the pink area to expand when the child items wrap to fit the space? Why is the pink area only covering one 'column'? I want it to cover all of the yellow area... (ie. so that the background of the submenu covers all the children)

.nav {
  display: flex;
  list-style: none;
}

.nav li {
  margin: 10px;
  background: aqua;
  width: 100px;
}

.menu-item {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  background-color: pink;
  max-height: 300px;
}
  
.submenu  ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
  
.submenu  li {
  background-color: yellow;
}

.menu-item:hover .submenu {
  display: flex;
}

<ul class="nav">
  <li class="menu-item">Nav 1
    <div class="submenu">
      <ul>
        <li>Subnav 1</li>
        <li>Subnav 2</li>
        <li>Subnav 3</li>
        <li>Subnav 4</li>
        <li>Subnav 5</li>
        <li>Subnav 6</li>
        <li>Subnav 7</li>
        <li>Subnav 8</li>
        <li>Subnav 9</li>
        <li>Subnav 10</li>
        <li>Subnav 11</li>
        <li>Subnav 12</li>
        <li>Subnav 13</li>
        <li>Subnav 14</li>
        <li>Subnav 15</li>
       </ul>
    </div></li>
  <li>Nav 2</li>
</ul>

I've had this issue myself and seen others with the same problem. Seems to be a bug with the browser not updating the parent width when using column wrap. You're best bet is to use another layout option, maybe column-count? — dantheman, Jul 07 '21 at 14:23

Scott Weaver · Accepted Answer · 2021-07-07T14:41:35.500

Apparently, browsers will not expand flex parents horizontally when using flex-direction:column.

You could try display:grid on the container, this seems to work rather well, although you specify max number of items per row rather than max height:

  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, auto);

See this question for more info.

.nav {
  display: flex;
  list-style: none;
}

.nav li {
  margin: 10px;
  background: aqua;
  width: 100px;
}

.menu-item {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  background-color: pink;
  
}
  
.submenu  ul {
  padding-left: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, auto);
}
  
.submenu  li {
  background-color: yellow;
}

.menu-item:hover .submenu {
  display: flex;
}

<ul class="nav">
  <li class="menu-item">Nav 1
    <div class="submenu">
      <ul>
        <li>Subnav 1</li>
        <li>Subnav 2</li>
        <li>Subnav 3</li>
        <li>Subnav 4</li>
        <li>Subnav 5</li>
        <li>Subnav 6</li>
        <li>Subnav 7</li>
        <li>Subnav 8</li>
        <li>Subnav 9</li>
        <li>Subnav 10</li>
        <li>Subnav 11</li>
        <li>Subnav 12</li>
        <li>Subnav 13</li>
        <li>Subnav 14</li>
        <li>Subnav 15</li>
       </ul>
    </div></li>
  <li>Nav 2</li>
</ul>

Element with a child element that has flex-direction: column and max-height; width not expanding when items wrap

1 Answers1