How to set full height in flex layout - html

Question

I have a flex layout, and its code like following
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item ">
Home
</li>
<li class="nav-item ">
Profile
</li>
<li class="nav-item">
Logout
</li>
</ul>
</div>
And its css like this
.navbar-collapse {
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
.navbar-nav {
margin-left: auto !important;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: row;
padding-left: 0;
list-style: none;
}
.navbar-nav .nav-item {
display: inline-flex;
text-align: -webkit-match-parent;
position: relative;
flex-shrink: 0;
padding-bottom: 0;
height: 100%;
}
.navbar-nav .nav-item a {
color: #fff;
font-weight: 400;
text-transform: capitalize;
cursor: pointer;
display: inline-flex;
align-items: center;
padding: 0 0.1rem;
white-space: nowrap;
position: relative;
}
It looks like this
The a element currently appears to have no height, and I want it to be as heigh as the parent element, how? Thank you.
Append:
The image shows what it looks like when I'm in chrome developer mode. Above is all my code.

Answer 1

The issue is with the default style of ul element.
ul has a default margin value of 1em as below.
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
You have to override this and bring this to you anchor tag as padding, because you are handling the hover effect of anchor tag. So this value should be set as the padding so that this will not break the layout while hovering.
I have fixed that in the below snippet.
Working Fiddle
.navbar-collapse {
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
.navbar-nav {
margin-left: auto !important;
margin: 0; /* Added */
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: row;
padding-left: 0;
list-style: none;
}
.navbar-nav .nav-item {
display: inline-flex;
text-align: -webkit-match-parent;
position: relative;
flex-shrink: 0;
padding-bottom: 0;
height: 100%;
}
.navbar-nav .nav-item a {
color: black;
font-weight: 400;
text-transform: capitalize;
cursor: pointer;
display: inline-flex;
align-items: center;
padding: 0 0.1rem;
white-space: nowrap;
position: relative;
}
/* New styles added */
.navbar-nav .nav-item a {
padding: 1em 0;
}
.navbar-nav .nav-item a:hover {
color: #fff;
background-color: #6c757d;
}
.navbar-collapse {
background-color: #00a82d;
}
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item ">
Home
</li>
<li class="nav-item ">
Profile
</li>
<li class="nav-item">
Logout
</li>
</ul>
</div>

Answer 2

I implemented now the rest of your code from the fiddle within the comments. You need to give the ul a height of 100% of the parent: .navbar-nav { height: 100%; }. In my snippet you have in CSS-line 301 declared: a { display: block; } -> swap the value to flex to keep the text from the anchor centered.
.navbar-nav {
height: 100%;
}
.navbar-nav a {
display: flex; /* swap this with line 301 */
}
/* original css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
main {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent
}
abbr[title] {
border-bottom: 0;
text-decoration: underline;
text-decoration: underline dotted
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
img {
border-style: none;
vertical-align: middle;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
vertical-align: baseline
}
textarea {
overflow: auto
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details {
display: block
}
summary {
display: list-item
}
template {
display: none
}
[hidden] {
display: none
}
html {
font-size: 625%;
font-family: "Roboto", Arial, Helvetica, sans-serif;
height: 100%;
width: 100%;
}
body {
font-size: 0.16rem;
height: 100%;
width: 100%;
color: #6c757d;
line-height: 1.75;
}
a {
text-decoration: none;
}
.wrapper {
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.container {
width: 100%;
flex-shrink: 0;
}
.row {
padding: 0 .12rem;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex: 1;
}
.navbar-brand {
font-size: 0.32rem;
color: #00a82d;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-collapse {
display: flex!important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
.navbar-nav {
margin-left: auto!important;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: row;
padding-left: 0;
list-style: none;
}
.navbar-nav .nav-item {
display: inline-flex;
text-align: -webkit-match-parent;
position: relative;
flex-shrink: 0;
padding-bottom: 0;
height: 100%;
}
.device-width {
width: 9.6rem;
margin: 0 auto;
}
.usercenter-navbar {
background-color: #00a82d;
line-height: 1;
}
.usercenter .device-width {
width: 98%;
}
.usercenter-navbar .navbar-brand {
color: #fff;
font-size: .28rem;
font-weight: 700;
}
.usercenter-navbar .navbar-nav .nav-item a {
color: #fff;
font-weight: 400;
text-transform: capitalize;
cursor: pointer;
/* display: block; */
align-items: center;
padding: 0 0.1rem;
white-space: nowrap;
position: relative;
}
.usercenter-navbar .navbar-nav .nav-item a:hover {
color: #fff;
background-color: #6c757d;
}
#media screen and (max-width: 768px) {
body {
font-size: 0.13rem;
}
.auth-form {
width: 80%;
}
}
#media (min-width: 1200px) {
.device-width {
width: 11.4rem;
}
.auth-form {
width: 22%;
}
}
#media (min-width: 1920px) {
.device-width {
width: 11.4rem;
}
.auth-form {
width: 20%;
}
}
#media (min-width: 1200px) and (max-width: 1919px) {
.device-width {
width: 11.4rem;
}
.auth-form {
width: 26%;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.device-width {
width: 10.8rem;
}
.auth-form {
width: 30%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.device-width {
width: 9.6rem;
}
.auth-form {
width: 30%;
}
}
<div class="wrapper usercenter">
<div class="container usercenter-navbar">
<div class="device-width">
<div class="row">
<a class="navbar-brand" href="/">Workspace</a>
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item current">
Home
</li>
<li class="nav-item ">
Profile
</li>
<li class="nav-item">
Logout
</li>
</ul>
</div>
</div>
</div>
</div>
</div>