让最高元素控制 flex wrapper 高度

Question

我正在设计一个包含许多子菜单的页脚大型菜单。内容是动态的。我想让最大的子菜单跨越包装器的一整列，因此还要设置它的高度。

我想出了一个解决方案，我正在测量块的高度并将包装高度设置为最高块的高度。

虽然这可以正常工作 - 解决方案感觉有点幼稚，并且告诉我有更优雅的解决方案。最好没有javascript。你觉得怎么样？我尝试了 CSS 网格，但无法得到我想要的结果。

nav {
  margin: 0 auto;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: wrap;
}

包装元素的高度是用Javascript设置的

/*
  Set the height of the wrapper to the highest blocks height
*/
function rearrangeBlocks() {
  // Grab the whole menu
  const section = document.querySelector('nav');
  // Grab all the blocks
  const allBlocks = document.querySelectorAll('.block');
  // Grab the highest block
  const longestBlock = Array.from(allBlocks).reduce((longest, current) => {
    if (current.getBoundingClientRect().height > longest.getBoundingClientRect().height) {
     return current; 
    } else {
      return longest;
    }
  });

  // Set the height of the menu to the same height of the highest menu item
  section.style.height = `${longestBlock.offsetHeight}px`;
}

Codepen

Answer 1

更改一些 CSS

nav {
  margin: 0 auto;
  width: 80%;
  display: flex;
  flex-direction: row;
  background: red;
}

https://codepen.io/anon/pen/RemZmb