Kevin Powell - Community•2y ago

Flex children not taking up 100% height of parent

For some reason, the div with the class "vertical-divider" inside the header__left div isn't taking 100% of its parent's height even when specified. Here's the code. I've tried using flex: 1 but no luck. Would be great if someone could help me out JSX:

<header className="header">
    <div className="header__container">
        <div className="header__left">
            <div>
                <img
                    src={logo}
                    alt="logo"
                    className="logo"
                />
            </div>
            <div className="vertical-divider"></div>
            <div className="header__left__name">
                <span>Name</span>
            </div>
        </div>
        <div className="header__center"></div>
        <div className="header__right"></div>
    </div>
  </header>

<header className="header">
    <div className="header__container">
        <div className="header__left">
            <div>
                <img
                    src={logo}
                    alt="logo"
                    className="logo"
                />
            </div>
            <div className="vertical-divider"></div>
            <div className="header__left__name">
                <span>Name</span>
            </div>
        </div>
        <div className="header__center"></div>
        <div className="header__right"></div>
    </div>
  </header>

CSS:

.header {
    padding: 1rem;
    outline: 1px solid black;
    display: flex;
    align-items: center;
}

.header__left {
    display: flex;
    gap: 1rem;
    align-items: center;
    height: 100%;
}

.logo {
    height: 30px;
}

.vertical-divider {
    height: 100%;
    width: 2px;
    background-color: #dfdfdf;
}

.header__left__name {
    font-size: 1.1rem;
    font-weight: 500;
}

.header {
    padding: 1rem;
    outline: 1px solid black;
    display: flex;
    align-items: center;
}

.header__left {
    display: flex;
    gap: 1rem;
    align-items: center;
    height: 100%;
}

.logo {
    height: 30px;
}

.vertical-divider {
    height: 100%;
    width: 2px;
    background-color: #dfdfdf;
}

.header__left__name {
    font-size: 1.1rem;
    font-weight: 500;
}