如何保持父 div 的纵横比但允许子元素填充所有垂直空间？

Question

I am trying to build a responsive box where the aspect ratio of the box is maintained and children fill all vertical space.

So far, if I give the children a fixed height, the parent no longer maintains its aspect ratio but then I can't give the children any hight at all. There seem to be a few answers on stack overflow but can't get them to completely work in my case. Here is my code in React:

ReactDOM.render(
    <div
        style={{
            width: '100%',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center'
        }}
    >
        <div
            style={{
                width: 350,
                height: 250,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                backgroundColor: 'white',
            }}
        >
            <Diagram />
        </div >
    </div>,
    document.getElementById('root'),

The component:

export default function Diagram(): ReactElement {
    return (
        <div className="h__diagramContainer">
            <div className="h__columnContainer">
                <div
                    className="h__diagramColumn"
                    style={{
                        border: '1px solid blue',
                        height: '100%',
                    }}
                />
                <div
                    className="h__diagramColumn"
                    style={{
                        border: '1px solid blue',
                        height: '100%',
                    }}
                />
                <div
                    className="h__diagramColumn"
                    style={{
                        border: '1px solid blue',
                        height: '100%',
                    }}
                />
            </div>
        </div>
    );
}

scss:

.h__diagramContainer {
    border: 1px solid green;
    width: 100%;
}

.h__diagramContainer:after {
    padding-top: 70%;
    display: block;
    content: '';
}

.h__columnContainer {
    display: flex;
}

.h__diagramColumn {
    width: calc(100% / 3);
}

.h__node {
    width: 20px;
    height: 20px;
}

How can I make the child divs take up all available vertical space so they can be used as flex containers?

Answer 1

Try setting the heights of the parent containers.

From MDN docs on CSS height

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (ie, it depends on content height), and this element is not absolutely positioned, the value computes to auto.

So right now your parent container has a height of 250px but its direct child, .h__diagramContainer , has height auto. So further down when .h__diagramColumn has height set to 100%, it's essentially 100% of whatever content is already in there.

Instead, if you just set height 100% for .h__diagramContainer and .h__columnContainer then your .h__diagramColumn children will be 100% of the top level parent's full 250px height.