Flexbox: make child fill 100% height of it's parent in this layout without fixed height or position absolute

Question

So I've got this very typical layout .logo can be of any height and I need the nav & ul & li & a inside the .container to take up 100% of it's width.

SCSS

.logo {
    font-size: 40px;
}

header {
    background-color: tomato;
}

.container {
    display: flex;
    padding: 10px;
    align-items: center;
}

nav {
    margin-left: auto;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;

    li {
        margin-right: 10px;
        &:last-child {
            margin-right: 0;
        }
    }

}

Markup

<header>
    <div class="container">
        <div class="logo">I'm logo</div>
        <nav role='navigation'>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>  
    </div>
</header>

I've seen this question but the solutions offer either position: relative on parent and position: absolute on child, or fixed-height solutions.

Edit The goal is to have a border-bottom that will be displayed right at the bottom of the container.

Paulie_D · Accepted Answer · 2015-08-07T17:19:23.350

I think this is what you were after:

* {
  margin: 0;
  padding: 0;
}
.logo {
  font-size: 40px;
}
 .container {
  display: flex;
}
.logo {
  flex: 0 0 auto;
  background: lightblue;
}
nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex: 1
}
li {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
}
a {
  width: 100%;
  flex: 1 100%;
  padding: 12px;
  border-bottom: 1px solid red;
}

<header>
  <div class="container">
    <div class="logo">Lorem ipsum dolor sit amet.</div>
    <nav role='navigation'>
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Clients</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Codepen Demo

Thanks. But in inspect element ``a`` is still not 100% of the container height. Whilst the main goal is to have ``a`` border-bottom that will be displayed right at the bottom of the container — knitevision, Aug 07 '15 at 16:17

Flexbox: make child fill 100% height of it's parent in this layout without fixed height or position absolute

1 Answers1