CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromebrowser
RHarris
RHarris

Reputation: 11187

Scrolling of html element only working in Chrome

If you run the below-mentioned code in Chrome, you get the desired result. The inner container that wraps the two sections (when the browser window gets shrunk down) will display a vertical scrollbar.

However, if you do the same thing in Edge or Firefox, the browser just simply displays a vertical scrollbar over the whole page instead of on the given container element.

How can I get this to work consistently across at least the modern browsers -- Edge, Chrome and Firefox?

I've got the following:

body {
  margin: 0;
}

.header,
.footer,
.messagebar {
  display: flex;
  height: 4rem;
  padding: 10px 50px;
  border: 1px solid lightgray;
}

.container,
.section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.scrollable {
  overflow-y: auto;
  overflow-x: hidden;
}

.section {
  margin: 10px 20px;
  flex-basis: 45%;
  flex-grow: 0;
}

.content {
  display: flex;
  flex-grow: 1;
}
<body style="display:flex;flex-direction:column;flex-grow:1;height:100vh;">
  <div class="header">This is the header</div>

  <div class="content">
    <div class="container">
      <div class="menu">This is the menu</div>
      <div class="container">
        <div class="container scrollable" style="flex-direction: row;flex-wrap:wrap">
          <div class="section">
            <div>This is some content ...</div>
            <div>A table of data</div>
          </div>
          <div class="section">
            <div>This is further content ...</div>
            <div>A table of other data</div>
          </div>
        </div>
      </div>
      <div class="messagebar">This is a message</div>
    </div>
  </div>

  <div class="footer">This is the footer</div>
</body>

Comment

To see exactly what I'm talking about, run the code snippet and then choose the Full Page option.

Once you have the page displayed in its own window, you can play with resizing the window. Resize horizontally should cause the right section to wrap below the left section. Resize vertically until you get a vertical scrollbar. Do this in both Chrome and Firefox and you'll see the difference in the vertical scrollbar.

Upvotes: 0

Views: 489

Answers (2)

RHarris
RHarris

Reputation: 11187

Thanks to Pogany over at CssTricks!

The answer is to add the following to my .scrollable class

.scrollable{
   ...
   height: calc(100vh - 14rem);
}

That seems to work like a charm!

Upvotes: 0

Eyup Toprak
Eyup Toprak

Reputation: 71

I think that a certain height is not defined. add specific height or max-height like below.

.scrollable {

    overflow-y: auto;
    overflow-x: hidden;
    max-height: 92px;

}

Upvotes: 1

Related Questions