Upon inspection, I noticed that the flex container successfully occupies the entire available space in the viewport as intended with height: 100vh;. This observation was made while using Firefox.
However, it seems like your current issue lies not in the vertical space but rather in correctly displaying elements inline. To rectify this, ensure that your buttons have display: inline-block; property applied from the start.
Another suggestion would be to adjust the width of the closest parent element. Initially, I implemented a rule for the parent elements .container > div setting their widths to width: fit-content;. Subsequently, I transferred this rule to the .container, and effectively managed the scrollbar feature by employing overflow-y: scroll.
It's worth mentioning that when utilizing overflow: auto, the scrollbar will only appear when necessary, but the container size won't consider whether the scrollbar will be displayed or not. Thus, if they do appear, they might cover some content due to occupying inner space.
In contrast, applying overflow: scroll will continuously show the scrollbar while always factoring them into the container size.
To make sure the container size adapts even with overflow: auto, you can explore options such as:
scrollbar-gutter: stable;
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
For a more precise control over the container width, you could validate via JavaScript whether the content overflows the container. If so, dynamically add (or remove in reverse scenario) the CSS attribute overflow: scroll.
I also included box-sizing: border-box to prevent containers from taking up additional vertical space.
The provided demo showcases two adjacent "apps," one featuring a container with non-overflowing content (hence no scrollbar), and the other with overflowing content (thus exhibiting a scrollbar):
This solution ensures the containers are regularly refreshed in case of window resizing, adjusting the scrollbars based on changes in content overflow conditions.