flexbox children don't fill height and text overflows

1412 views html
-4

I am trying to have 2 rows with the height 100% of the windows. As you can see the 2 columns don't extend fully and the first box content overflows outside.

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  height: 100%;
  flex-direction: row;
  display: flex;
}

.nav {
  background: hotpink;
  flex: 1;
}
.main {
  background: aliceblue;
  flex: 1;
}
<div class="container">
  <div class="nav">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.

Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.

Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.

Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.

Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
  </div>
  
  <div class="main">
    content
  </div>
</div>

answered question

2 Answers

5

You could make it scrollable by using overflow: auto

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  height: 100%;
  flex-direction: row;
  display: flex;
}

.nav {
  background: hotpink;
  flex: 1;
  overflow: auto;
}
.main {
  background: aliceblue;
  flex: 1;
}
<div class="container">
  <div class="nav">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.

Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.

Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.

Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.

Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
  </div>
  
  <div class="main">
    content
  </div>
</div>

Or remove the height: 100% on .container so it's stretched by inner elements

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  flex-direction: row;
  display: flex;
}

.nav {
  background: hotpink;
  flex: 1;
}
.main {
  background: aliceblue;
  flex: 1;
}
<div class="container">
  <div class="nav">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.

Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.

Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.

Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.

Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
  </div>
  
  <div class="main">
    content
  </div>
</div>

posted this
5

Try using background-size: cover; and position: fixed; like this:

html,
body {
  padding: 0;
  margin: 0;
}

.container {
  height: 100%;
  flex-direction: row;
  display: flex;
  position: fixed;
}

.nav {
  background: hotpink;
  flex: 1;
  background-size: cover;
}
.main {
  background: aliceblue;
  flex: 1;
}
<div class="container">
  <div class="nav">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi ante, faucibus a eros tristique, tincidunt sodales augue. Aenean volutpat tincidunt ligula, sed vestibulum ex bibendum sit amet. Suspendisse potenti. Suspendisse at orci quis magna pretium auctor mattis ac metus. Cras quis sollicitudin nulla. Etiam at dolor tellus. Donec luctus sagittis aliquet. In porta pulvinar neque, sit amet eleifend justo vestibulum et. Aenean gravida varius quam, quis auctor neque pellentesque eget.

Nulla interdum a nibh eget euismod. Sed molestie imperdiet ultricies. Mauris ut ligula id lectus aliquet pellentesque eget vitae eros. Nunc lobortis nisl nec diam dictum sodales. Ut ac mollis quam, ut tempus magna. Mauris convallis ut turpis a congue. Aenean aliquam, lacus non sodales pulvinar, nibh metus mollis lectus, quis lacinia magna sapien quis mi. Duis porttitor dui et nisl rutrum, vitae dictum turpis sodales. Pellentesque velit libero, molestie eget dignissim ac, faucibus eget nulla. Vestibulum sit amet mattis mi.

Nam lacus erat, venenatis nec facilisis sit amet, sollicitudin nec augue. Sed luctus suscipit lacus, ut scelerisque sem pellentesque et. Etiam luctus vel nisi sit amet porttitor. In ac ex porta, tempor lacus eget, ultricies arcu. Pellentesque ut ipsum venenatis leo placerat posuere vehicula quis diam. Cras ac semper urna, id condimentum risus. Curabitur neque ante, auctor vitae arcu ut, dignissim molestie est. Nunc consequat mattis facilisis. Fusce sed est sit amet purus iaculis mollis vitae in est. Proin tincidunt condimentum magna et vehicula.

Quisque id lacus risus. Nulla condimentum in justo quis vestibulum. Pellentesque non erat aliquam, blandit eros ac, finibus felis. Pellentesque porttitor felis dolor, vitae tincidunt tortor egestas vel. Quisque sit amet sagittis nulla. Phasellus vestibulum orci quis malesuada facilisis. Praesent tellus magna, euismod sed dictum in, tristique nec nunc. Sed leo odio, bibendum id lectus ac, finibus commodo urna. Nulla et dolor ultrices, aliquam nunc semper, tempor eros.

Duis sollicitudin nibh sed vehicula maximus. Fusce lacus lectus, volutpat a sapien vitae, aliquet rutrum enim. Integer tincidunt finibus vulputate. Ut iaculis lacinia semper. Aenean pretium in lorem quis mattis. Integer commodo, leo ac porttitor varius, libero lacus porttitor augue, et rutrum est mi in massa. Quisque vehicula hendrerit volutpat. Donec in nulla vel sem ultrices venenatis. Nulla nec placerat orci, in sollicitudin mi. Phasellus vitae dui et tortor aliquam dapibus sed sed purus. Duis mattis ornare eleifend. Phasellus aliquam nunc id nisl ultrices, ut gravida est gravida.
  </div>
  
  <div class="main">
    content
  </div>
</div>

posted this

Have an answer?

JD

Please login first before posting an answer.