Flexbox item not going to the bottom of a container? - css

Question

As you will tell from this question I'm still new with Flexbox as well as with SASS. I have an MVC app where I'm trying to align the header login information depending on if they are authenticated or not.
What I'm trying to accomplish is to have my header with a logo to the left and some login/register buttons flush to the bottom in a single row if you are not authenticated or their username and logoff/account info stacked on top of each other if they are authenticated.
I'm trying to use flexbox to accomplish these. The idea is I would have an overall parent container "header_account-info", the logo in the "header__logo" child container, and other login parts in either "header_account-user" or "header-account-login". For testing I'm using the "header-account-login" container.
With the code below I can not get the "header-account-login" container to have a background color (using for testing) nor can I get it to align to the bottom.
I put this in Code Pen and see the same results.
https://codepen.io/anon/pen/WgGxQL
Why would I not see a background color in my "header-account-login" container and I thought I had the correct setting to make the buttons go to the end (bottom) of the container?
HTML
<div class="header">
<div class="header__logo">
<img src="~/images/logo.png" class="header-logo" />
</div>
<div class="header_account-info">
<div class="header-account-login">
<a href="#Url.Action("Register", "Account")" id="registerLink" class="btn btn-outline-secondary">
<i class="far fa-user-plus"></i> Register
</a>
<a href="#Url.Action("Login", "Account")" id="loginLink" class="btn btn-outline-secondary">
<i class="fas fa-sign-in-alt"></i> Log In
</a>
</div>
</div>
</div>
SASS
.header {
display: flex;
padding: 3px;
&__logo {
/*flex: 1;*/
margin-right: auto;
background-color: aqua;
height: 100px; /*TESTING*/
}
&__account-info {
display: flex;
background-color: aquamarine;
}
&__account-user {
background-color: blanchedalmond;
}
&__acount-login {
align-items: flex-end;
background-color: aquamarine;
}
}

Answer 1

Why would I not see a background color in my "header-account-login" container and I thought I had the correct setting to make the buttons go to the end (bottom) of the container?
Because you have typos in your HTML/CSS - in some cases you are using a single underscore and in others two. Also "account" is incorrectly spelled in some places.
As for the lauot, I think this will suffice:
.header {
display: flex;
padding: 3px;
justify-content: space-between;
}
.header__logo {
/*flex: 1;*/
margin-right: auto;
background-color: aqua;
height: 100px;
}
.header__account-info {
display: flex;
align-items: flex-end;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="header__logo">
<img src="http://www.fillmurray.com/g/140/100" class="header-logo" />
</div>
<div class="header__account-info">
<div class="header__account-login">
<a href="#Url.Action(" Register ", "Account ")" id="registerLink" class="btn btn-outline-secondary">
<i class="far fa-user-plus"></i> Register
</a>
<a href="#Url.Action(" Login ", "Account ")" id="loginLink" class="btn btn-outline-secondary">
<i class="fas fa-sign-in-alt"></i> Log In
</a>
</div>
</div>
</div>

Answer 2

Here is one way to make it work:
.header-account-info {
position: relative;
}
.header-account-login {
background-color: red;
position: absolute;
bottom: 0px;
right: 0px;
width: 158px;
}
The way you are trying to call your class (i.e. "&__acount-login") is wrong - just give yourself the full class name like my example.