I'm building a web app which uses a sidebar menu for all of it's options. The sidebar is equal for every page, but contains different items depending on the visited page.
We've received feedback that the size (height) of those items is not identical throughout the website. This is correct, because some pages have menu items that have two or even three lines. Although one-line is most used.
I'm tasked with the following issue:
- Create a pure
CSSsolution which requires the styling of one component (c-menu-item) and it's container element (b-sidebar), which automatically sizes the heights of all menu items based on the size of the largest menu item.
Flexbox has an easy way to deal with this in a horizontal orientation, but every attempt to recreate something in a vertical setting has failed thus far.
Mandatory minimal usercase:
.b-sidebar {
display: flex;
flex-flow: column nowrap;
justify-content: center;
background: #ff0;
width: 200px;
padding: 10px;
}
.c-menu-item {
display: flex;
flex-flow: row nowrap;
align-content: center;
width: 100px;
background: #0ff;
margin: 5px;
}<div class="b-sidebar">
<div class="c-menu-item">Hello world!</div>
<div class="c-menu-item">Hello world!</div>
<div class="c-menu-item">Hello world!</div>
<div class="c-menu-item">Hello world!</div>
<div class="c-menu-item">Hello world! I have two lines</div>
</div>
<p>I would like for <b>all</b> menu items to take the height of the last element, in a responsive matter because the menu items en size differs per page of the web application</p>(Sidenote: I'm aware I can solve this using JavaScript if required. I just prefer a clean CSS solution, if this is not possible, then that would be fine for me as well).
