How to express the notion of taking min of content and fixed value for scrollable element?

Question

Just for simplicity sake let's say that my fixed height is 100px. Then the question from title could be expressed in CSS as the following:

  height: min(min-content, 100px);

Meaning take min -- either content height or 100px. The only problem is, it is not supported.

I could skip height and use max/min-height properties, but then I lose the ability to scroll. So how to express this notion and still have ability to scroll the content?

Here is actual markup I use (I need this nested structure with 3 divs):

<div style="position: absolute;
    border: 1px black solid;
    box-sizing: border-box;
    width:10rem;
            
    height: 100px;
    max-height: 100px;
    min-height: min-content;">
    <div style="position: relative;
        width: 100%;
        height: 100%;">
        <div style="height: 100%; width: 100%; overflow-y: auto;">
            <div>A</div>
            <div>B</div>
            <div>C</div>
            <div>D</div>
            <div>E</div>
            <div>F</div>
            <div>G</div>
        </div>
    </div>
</div>

Answer 1

One approach which can be solution in some cases is not to focus on height directly, but changing the way the container is displayed -- the key is flexbox here.

<div style="position: absolute;
    border: 1px black solid;
    box-sizing: border-box;
    width:10rem;
    display:flex;
    height: auto;
    max-height: 100px;">
    <div style="position: relative;
        width: 100%;">
        <div style="height: 100%; width: 100%; overflow-y: auto;">
            <div>A</div>                  
            <div>B</div>
            <div>C</div>
            <div>D</div>
            <div>E</div>
            <div>F</div>
            <div>G</div>
        </div>
    </div>
</div>

Note: it is not universal solution (for example it does work in dialogs, because dialog are displayed as block).