'Flexbox scrollable columns

I'm struggling to make the below design work.

Desired design

What I want is:

  • Fixed height header
  • fixed width sidebar
  • Sidebar and content to always fill down to the bottom of the screen, whatever the browser window size.
  • Content to scroll vertically if it overflows, i.e. the .content div, I don't want any scrolling on body

The only way I can get this to work is by setting a fixed pixel height on an outermost wrapping element, which of course doesn't give me the always-100%-height requirement.

I'm sure I'm missing something subtle but every combination of layout CSS I use doesn't seem to work. I'm not precious about the html or CSS, I just need something that works.

<body>
  <div class="header">header</div>
  <div class="row">
    <div class="sidebar">sidebar</div>
    <div class="content">lots of overflowing content</div>
  </div>
</body>
htmlcssflexbox


Solution 1:[1]

You achieve this by doing:

body {
  margin: 0;
}

.header {
  width: 100%;
  height: 100px;
  background: red;
}

.row {
  display: flex;
  height: calc(100vh - 100px);
}

.sidebar {
  background: lightblue;
  padding: 30px;
  width: 200px;
}

.content {
  height: calc(100vh - 100px);
  overflow: auto;
  flex-grow: 1;
}

.spacer {
  height: 3000px;
}
<div class="header">header</div>
<div class="row">
  <div class="sidebar">sidebar</div>
  <div class="content">
    lots of overflowing content 
    <div class="spacer"></div>
  </div>
</div>

Solution 2:[2]

For such task I find css-grid the easier and better solution. With CSS-Grid you give the body a height of 100vh and width of 100vw. That way the grid will always span the exact screen size.

Then add an overflow rule to the content to let the content overflow if necessary instead of the body.

That way, the header height and sidebar width can also be responsive as the height and width dont have to be fixed. The other elements size will adapt to the header and sidebar size automaitcally.

Therefor ff you need to controll height and width at the same time with full responsiveness in mind. CSS-Grid has its advantages over flexboxes.

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: min-content auto;
}

header {
  grid-column: span 2;
  background-color: red;
  height: 80px;
}

sidebar {
  background-color: blue;
  width: 150px;
}

content {
  padding: 5px;
  overflow: auto;
}
<header>
</header>
<sidebar>
</sidebar>
<content>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</content>

Solution 3:[3]

Pay attention to the fact that I have wrapped in the main div to class .main.

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

body {
  overflow: hidden;
}

.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  min-height: 100px;
  background-color: red;
}

.row {
  display: flex;
  height: 100%;
}

.sidebar {
  min-width: 200px;
  height: inherit;
  background-color: blue;
}

.content {
  flex: 1;
  padding: 10px;
  overflow-x: auto;
}
<body>
  <div class="main">
    <div class="header">header</div>
      <div class="row">
        <div class="sidebar">sidebar</div>
        <div class="content">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains. On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.</div>
      </div>
  </div>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 tacoshy
Solution 3 s.kuznetsov

Related Questions