CODEWITHSUNDEEP
cssflexbox
chovy
chovy

Reputation: 75656

how to grow columns to be the same height of content of either column using css flexbox?

Demo: https://jsfiddle.net/chovy/7vgLpm9h/7/

I'm having a hard time getting the nav to be as tall as the content (or if you remove content having the content be as tall as the nav).

Both should be 100% of height of the tallest column.

I also need to position last nav item at bottom of navigation bar.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body,
main {
  height: 100%;
  min-height: 100vh;
  width: 100vw;
}

main {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

aside {
  width: 100rem;
  border: 1px solid red;
  align-self: stretch;
  flex-grow: 1;
}

section {
  flex-grow: 1;
  border: 1px solid green;
}

nav li {
  margin-bottom: 1rem;
}

nav li:last-child {
  margin-top: auto;
  margin-bottom: 0;
  color: blue;
  font-weight: 700;
}
<main>
  <aside>
    <header>header</header>
    <nav>
      <ul>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
      </ul>
    </nav>
  </aside>
  <section>
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column.
  </section>
</main>

Upvotes: 0

Views: 42

Answers (1)

Temani Afif
Temani Afif

Reputation: 272590

Simplify your code like below. You have to remove some unnecessary properties

body {
  margin: 0;
}
main {
  min-height: 100vh;
  display: flex;
}
aside {
  width:100px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}
nav {
  flex-grow: 1;
  display: flex;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
section {
  flex: 1;
  border: 1px solid green;
}
nav li:not(:last-child) {
  margin-bottom: 1rem;
}
nav li:last-child {
  margin-top: auto;
  color: blue;
  font-weight: 700;
}
<main>
  <aside>
    <header>header</header>
    <nav>
      <ul>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
        <li>link 1</li>
      </ul>
    </nav>
  </aside>
  <section>
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column. grow this to 100% of either column.
    grow this to 100% of either column.
  </section>
</main>

Upvotes: 1

Related Questions