React-Boostrap - Fix Row at bottom

Question

I am using React, TypeScript and React-Boostrap. I am currently trying to fix a <Row/> at the bottom but nothing works:

Rendering:

render() {
    return (
        <Container id={"chat"} className={`${style.chatroom}`}>
            <Row>
                <Col xl lg md sm={12}>
                    <h1 className={`${style.title}`}>Channel by Emixam23</h1>
                </Col>
            </Row>
            <Row>
                <Col xl lg md sm={12}>
                    <h5 className={`${style.logged_user_id}`}>{this.props[STORE_LOGGED_USER].getLoggedUser.id}</h5>
                </Col>
            </Row>
            <Row>
                <Col xl lg md sm={12}>
                    <ChatChannelMessagesList messages={this.getMessages()}/>
                </Col>
            </Row>
            <Row className={"fixed-row-bottom"}>
                <Col xl lg md sm={12}>
                    <ChatChannelInput onSendClicked={(input: string) => this.sendMessage(input)}/>
                </Col>
            </Row>
        </Container>
    );
}

style.css:

.chatroom {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.title {
    background-color: #620000;
    color: #FFF;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logged_user_id {
    background-color: #620000;
    color: #FFF;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed-row-bottom {
    position:fixed !important;
    bottom:0 !important;
}

Any idea? I am not really a CSS expert, maybe I am missing something I don't know... Thanks for any help !

Answer 1

try using

position: absolute;
bottom: 0;