如何让SideSelectionDiv与按钮一同高度适配父级FloatLeftDiv？

算力阿峰

2026-8-21

问题：让子容器高度铺满父级浮动容器

需求说明

我要实现一个左侧浮动、高度100%、宽度固定的容器，内部包含：

一个Back按钮，样式要求：width: 10em; height: 2.7em;
一个SideSelectionDiv，需要让它的高度铺满父容器的剩余空间

当前问题是SideSelectionDiv无法铺满父容器，只能显示部分高度，目标是让红色的SideSelectionDiv填满绿色父容器的剩余区域。

现有代码

HTML结构

<FloatLeftDiv>
    <SpacedButton style={props.style}>Back</SpacedButton>
    <SideSelectionDiv>
        <p>test</p>
    </SideSelectionDiv>
</FloatLeftDiv>

CSS（styled-components）

const FloatLeftDiv = styled.div`
    height: 100%;
    border: 1px solid green;
    float: left;
`

const SideSelectionDiv = styled.div`
    border: 1px solid red;

    height: 80%;
    margin: 0.5em;
`

const StdButton = styled.button`
    height: fit-content;
    width: 10em;
    height: 2.7em;
    background-color: ${props => props.style.primary};
    color: ${props => props.style.secondary};
    font-size: 1.5em;
    padding: 0.2em;

    border-radius: 0.5em;

    cursor: pointer;

    &:hover {
        background-color: ${props => props.style.secondary};
        color: ${props => props.style.primary};
    }
`

const SpacedButton = styled(StdButton)`
    margin: 0.25em;
`