I am trying to get the overflow scrolling on a nested div. The following snipped works because of the height: calc(100vh - 195px). I was wondering if there is a way to get the scroll withouth this calc:
body { margin: 0; overflow: hidden;}#root { overflow: hidden;}.nav { display: flex; background-color: red; align-items: center; position: relative;}.header { padding: 1.5em;}.container { display: flex; height: calc(100vh - 195px); /*<-- dynamic?*/ overflow: hidden;}.form { width: 400px; padding: 0 1.5em; overflow-x: hidden; overflow-y: auto; flex-direction: column; display: flex; background-color: yellow;}.gm { overflow: hidden; flex: 1 1 0%; display: flex; background: aqua;}.todo { display: flex; align-items: center; justify-content: center; flex: 1;}.tag { position: absolute; padding: 5px; bottom: 0;}<div id="root"><nav class="nav"><h2>Calculator</h2></nav><div class="content"><div class="header"><h1>Create New Project</h1></div><div class="container"><div class="form"><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div></div><div class="gm"><div class="todo">TODO</div><div class="tag">Tag</div></div></div></div></div>I have already read this post, but it did not help. I think it is a different scenario, since I want the overflow be scrollable just in the yellow box, as it is with the calc heigth. I am looking for a solution without this css property set to the container.
I tried to add display: flex and flex-direction: column to the content and flex-grow: 1 to the container, did not help.