1

I am trying to create the following layout using flexbox. The left and right panels should be scrollable.

enter image description here

I have an implementation that used to work perfectly cross-browser. However it has stopped working on the latest versions of Chrome and Firefox. It is still working on Safari though.

On Chrome and Firefox, the header is disappearing and the entire page scrolls instead of just the two panels. I am curious to know what has changed and what's the recommended fix? Am I not following the flexbox spec correctly?

The CSS is shown below. The full source can be found on Codepen.

html, body {
    height: 100%;
}

/* ----- root and its children ----- */
#root {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    background-color: #1277eb;
    height: 60px;
}

.content {
    flex: 1;
    display: flex;
    flex-direction: row;
}

/* ----- children of content ----- */
.lhs {
    background-color: #e7f1fd;
    min-width: 400px;
    overflow: auto;
}

.rhs {
    flex: 1;
    overflow: auto;
}
Naresh
  • 23,937
  • 33
  • 132
  • 204
  • 1
    Add `min-height: 0` to `.content` ([revised demo](https://codepen.io/anon/pen/BEbGPM)). – Michael Benjamin Apr 29 '19 at 03:16
  • 1
    Thank you so much, Michael. I had searched around quite a bit, but wasn't able to connect to your previous answer. This indeed solves my problem. Thanks, again. – Naresh Apr 29 '19 at 04:27

0 Answers0