uvermonkey
uvermonkey
KPCKevin Powell - Community
Created by uvermonkey on 6/20/2023 in #front-end
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;
}
13 replies