Css 使用Flexbox将导入的样式化组件与父div的底部对齐

我有一个样式化的组件，看起来像这样：

export class Footer extends Component {
    render() {
        return (
                <FooterWrapper>
                    <h3>
                        Some Text
                    </h3>
                </FooterWrapper>
        );
    }
}

const FooterWrapper = styled.div`
    margin: 0rem;
`;

导入的FormFooter组件将位于另一个组件的父div中，如下所示：

<div className="parent-div">
<div className="header"></div>
<div className="body"></div>
<FormFooter />
</div>

---

出于某种原因，样式化组件

位于body div的正下方。我只想将其定位到父div的底部。

为样式化组件添加100%的宽度，并为父元素添加

flex wrap:wrap

导出类页脚扩展组件{
render（）{
返回(
一些文本
);
}
}
const FooterWrapper=styled.div`
保证金：0雷姆；
宽度：100%；
`;看来我已经解决了我的问题。-问题是body div
需要一个
flex-grow
属性来表示body div在父容器中应该保留多少剩余空间，例如：
flex-grow:3

添加此内容后，问题就解决了。
感谢您的尝试，我解决了我的问题，并在上面添加了我的答案。感谢您发布答案！
<div className="parent-div">
<div className="header"></div>
<div className="body"></div>
<FormFooter />
</div>