I have the following code where I'm trying to build a modal that doesn't have a height set, but do have a max-height so it adjusts to its content but doesn't grow bigger than certain limit. The problem is that I have to set the height property of the b element for the overflow inside the d and g elements to work, but with this it doesn't adjust to its content.
html, body { height: 100%; margin:0;}.a { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #0001;}.b { padding: 1.4em; box-shadow: 1px 1px 6px #0002; border-radius: 5px; position: fixed; background: white; transform: translate(-50%, -50%); left: 50%; top: 50%; width: min(90%, 1200px); max-height: min(90%, 1000px); overflow: auto; box-sizing: border-box; height: 100%;}.c { display: flex; height: 100%; gap: 1em;}.d { flex-grow: 1; overflow: auto;}.e { flex-grow: 3; box-sizing: border-box; display: flex; flex-direction: column; gap: 0.5em; overflow: auto; height: 100%;}.g { flex-grow: 1; overflow: auto;}<div class="a"><div class="b"><div class="c"><div contenteditable class="d">sidebar</div><div class="e"><div class="f"> top bar</div><div contenteditable class="g"></div><div class="h"> pagination</div></div></div></div></div>You can test this code by editing the d and g elements (they are contenteditable) until they are bigger than the max-height of b and removing the height property of b.
Do you know what can be done for this to work without setting the height?