Flex children not taking up 100% height of parent

<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 {
    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;
}