让最高的元素控制柔性包装器的高度

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