Help with responsive menu layout

cross-posted from: https://lemmy.world/post/2566953

> Hi, I'm an old webdev who is rusty in CSS; I learn about `calc()` recently and never really learnt `display: flex` properly.
>
> I made [some webs with a responsive menu layout](https://crul.github.io/CursoTeoriaCuanticaDeCamposJavierGarcia/) (relevant CSS code posted on bottom). I tried using flex but I still had to do one ugly hack: I have the menu heights for the different resolutions hardcoded and I have to update them manually every time a new chapter is added. It's not a big deal, but I would like to know if there is a proper way to do this.
>
> Some alternatives I've thought about:
> - [The new `round()`](https://developer.mozilla.org/en-US/docs/Web/CSS/round), but it's too new and not supported by most browsers.
> - JavaScript
>
> ... but I feel like there must be a clean CSS-only way to achieve this.
>
> Thanks!
>
> Relevant CSS code ([link to full stylesheet](https://crul.github.io/CursoTeoriaCuanticaDeCamposJavierGarcia/style.css?v=20220826) in case I missed something).
>
> ul {
> display: flex;
> flex-direction: column;
> flex-wrap: wrap;
> height: 624px; /* =27x23+3 | 23 = 91/4 */
> margin: 0;
> padding: 16px 16px 4px 16px;
> vertical-align: top;
> }
> @media screen and (max-width: 1000px) {
> ul {
> height: 840px; /* =27x31+3 | 31 = 91/3 */
> }
> }
> @media screen and (max-width: 582px) {
> ul {
> height: 1245px; /* =27x46+3 | 46 = 91/2 */
> }
> }
> @media screen and (max-width: 400px) {
> ul {
> height: auto;
> }
> }
> ul li {
> list-style-type: none;
> margin: 2px 16px 2px 4px;
> font-size: 120%;
> }
> ul li a {
> display: inline-block;
> background-color: #3fa79e;
> color: #d2e7e2;
> text-decoration: none;
> padding: 2px 8px;
> border: solid 1px #d2e7e2;
> }
> ul li a:first-child {
> width: 106px;
> margin-right: -3px;
> }
> ul li a:hover {
> background-color: #144c48;
> color: #fff;
> border: solid 1px #fff;
> }
>