CODEWITHSUNDEEP
htmlcssflexbox
Leon Gaban
Leon Gaban

Reputation: 39018

Flexbox, how to get height to always stretch vertically 100% to fill space?

enter image description here

https://codepen.io/leon-yum/pen/GxWqMe?editors=1100

Trying to re-create a problem we're having in one of our apps. The Sidebar in our app never stretches 100% to fit the content. In the example above the <div class="content-body"> also doesn't fit height 100%.

Markup: 

  <body>
    <div id="app">
      <section class="h100 w100">
        <main>
          <header>Header</header>
          <section class="content">
            <div class="sidebar">
              <ul>
                <li>Menu 1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
                <li>Menu 4</li>
                <li>Menu 5</li>
              </ul>
            </div>
            <div class="content-body">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et urna vulputate, venenatis tellus eget, vehicula risus. Suspendisse potenti. Sed fermentum pulvinar diam eu suscipit. Etiam cursus arcu dapibus turpis pulvinar, at lobortis tortor dapibus. Morbi pellentesque fringilla sem at luctus. Sed sagittis leo ut ligula hendrerit, at sollicitudin massa efficitur. Phasellus volutpat nibh ante, nec fermentum ex hendrerit ultricies. Suspendisse tempus fringilla aliquam. Praesent eget varius lorem. Phasellus malesuada, purus nec venenatis feugiat, dui lectus porttitor dolor, sollicitudin semper dui libero quis orci. Sed vitae viverra ante, in rutrum massa. Aliquam mollis vel dui eu porta. In ac accumsan augue. Integer placerat egestas dui, quis aliquam libero bibendum non. Pellentesque scelerisque euismod dolor, ac gravida est mattis non. Suspendisse potenti.
              </p>
            </div>
          </section>
        </main>
      </section>
    </div>
  </body>

CSS

body {
  margin: 0;
  font-family: Arial;
  color: white;
}

.w100 { width: 100%; }
.h100 { width: 100%; }

header {
  padding: 20px;
/*   width: 100%; */
  height: 20px;
  color: brown;
  background: cyan;
}

#app {
  width: 100%;
  height: 100%;
  background: #212121;
}

.content {
  display: flex;
  flex: 1 1 auto;
  height: 100%;
}

.content-body {
  flex: 1 1 auto;
  padding: 20px;
  background: #333;
}

.sidebar {
  background: #666;
}

Upvotes: 2

Views: 56

Answers (1)

Brandon Pereira
Brandon Pereira

Reputation: 182

I fixed this by adding height: 100vh; to a couple things (html, body, h100 class, and the "main" element. 100vh is better than 100% because it means 100% of the vertical height of the browser (100% height may change depending on a couple variables like parent containers).

html {
  height: 100vh;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  color: white;
  height: 100vh;

}

.w100 { width: 100%; }
.h100 { height: 100vh; }

header {
  padding: 20px;
/*   width: 100%; */
  height: 20px;
  color: brown;
  background: cyan;
}

#app {
  width: 100%;
  height: 100%;
  background: #212121;
}

...

See my codepen here: https://codepen.io/anon/pen/oqZLJQ?editors=1100

Upvotes: 1

Related Questions