Overflow Scroll css is not working in the div

Question

I am looking for CSS/Javascript solution for my HTML page scrolling issue.

I have three divs that contain a div, a header and a wrapper div,

I need a vertical scrollbar in the wrapper div, height should be auto or 100% based on the content.

The header should be fixed, and I don't want overall scrollbar so I have given overflow:hidden in the body tag,

I need vertical scrollbar in my wrapper div. How can I fix this?

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%
}

#container {
  width: 1000px;
  margin: 0 auto;
}

.header {
  width: 1000px;
  height: 30px;
  background-color: #dadada;
}

.wrapper {
  width: 1000px;
  overflow: scroll;
  position: relative;
}

<div id="container">

  <div class="header"></div>

  <div class="wrapper">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim.
      Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam
      luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
    <!-- Lots more paragraphs-->
  </div>

</div>

Please refer to this JS Fiddle

Ionică Bizău · Accepted Answer · 2013-06-25 18:52:03Z

268

You are missing the height CSS property.

Adding it you will notice that scroll bar will appear.

.wrapper{ 
    // width: 1000px;
    width:600px; 
    overflow-y:scroll; 
    position:relative;
    height: 300px;
}

JSFIDDLE

From documentation:

`overflow-y`

The overflow-y CSS property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.

answered Jun 25, 2013 at 18:52

Ionică Bizău

114k95 gold badges311 silver badges490 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

djechlin Over a year ago

how to make the height stop at the viewport? I don't want to hardcode in pixels, since it does't work for different screen sizes

Ionică Bizău Over a year ago

@djechlin Ask a question for that. Probably you can use percent values or dislpay: fixed... I'm not sure what you're trying to do.

Joseph Over a year ago

use the viewport height property: height: 100vh

MikeSchinkel Over a year ago

OMG, thank you. Been fighting this for an hour.

HoldOffHunger · Accepted Answer · 2020-08-30 16:29:48Z

70

The solution is to add height:100%; to all the parent elements of your .wrapper-div as well. So:

html{
    height: 100%;
}

body{ 
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}

#container{
    width:1000px;
    margin:0 auto;
    height:100%;
}

edited Aug 30, 2020 at 16:29

HoldOffHunger

21.3k11 gold badges123 silver badges146 bronze badges

answered Dec 5, 2016 at 13:05

johannes

1,4671 gold badge13 silver badges27 bronze badges

3 Comments

Lorik Over a year ago

Hello, I know it's been 7 years but I'm here to ask how this works? Why is it like this? Or is this some typical CSS trick that 'just' works.

johannes Over a year ago

If you set the height of a element in percentages, then that percentage refers to the height of its parent. If the parent has no height set to it, it will refer to the closest ancestor that has a set height. If no ancestor with a set height is found, the percentage is a percentage of nothing. And 100% of nothing is nothing. I found an interesting article on the subject here: freecodecamp.org/news/html-page-width-height

Brian White Over a year ago

How would someone add a scrollbar to a div that is deep inside a dialog layout with size controlled by "flex"? There's no fixed height and it's not practical to add height to every surrounding div but the scrollbar is necessary because the space is likely not large enough for its text content.

simhumileco · Accepted Answer · 2017-04-04 11:10:31Z

32

If you add height in .wrapper class then your scroll is working, without height scroll is not working.

Try this http://jsfiddle.net/ZcrFr/3/

CSS:

.wrapper {
  position: relative;
  overflow: scroll;
  width: 1000px;
  height: 800px;
}

edited Apr 4, 2017 at 11:10

simhumileco

35.3k18 gold badges148 silver badges125 bronze badges

answered Jun 25, 2013 at 10:50

Falguni Panchal

8,9893 gold badges29 silver badges33 bronze badges

2 Comments

user2493730 Over a year ago

Thanks, but my actual requirement is i should not give any height may be can give 100% or auto, the content should take according to the browser window, can u any other solution in CSS/JAVASCRIPT ?

Coding world Over a year ago

why it's not working when I given height in percentage as height:100%

itzhar · Accepted Answer · 2020-03-18 22:37:25Z

9

in my case, only height: 100vh fix the problem with the expected behavior

answered Mar 18, 2020 at 22:37

itzhar

13.1k6 gold badges62 silver badges65 bronze badges

Comments

Aravind30790 · Accepted Answer · 2013-06-25 11:05:51Z

8

You didn't gave the div a height. So it will automatically stretch when more content is added. Give it a fix-height and the scroll bars will show up.

edited Jun 25, 2013 at 11:05

Aravind30790

9929 silver badges22 bronze badges

answered Jun 25, 2013 at 10:53

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

2 Comments

user2493730 Over a year ago

Thanks, but my actual requirement is i should not give any height may be can give 100% or auto, the content should take according to the browser window, can u any other solution in CSS/JAVASCRIPT ?

Nick Over a year ago

Give it a height of 100%. Then you meet the requirements for overflow and yourself.

AKrush95 · Accepted Answer · 2018-09-20 04:05:43Z

If you set a static height for your header, you can use that in a calculation for the size of your wrapper.

http://jsfiddle.net/ske5Lqyv/5/

Using your example code, you can add this CSS:

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

#container {
  height: 100%;
}

.header {
  height: 64px;
  background-color: lightblue;
}

.wrapper {
  height: calc(100% - 64px);
  overflow-y: auto;
}

Or, you can use flexbox for a more dynamic approach http://jsfiddle.net/19zbs7je/3/

<div id="container">
  <div class="section">
    <div class="header">Heading</div>
    <div class="wrapper">
      <p>Large Text</p>
    </div>
  </div>
</div>

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

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.header {
  height: 64px;
  background-color: lightblue;
  flex-shrink: 0;
}

.wrapper {
  flex-grow: 1;
  overflow: auto;
  min-height: 100%; 
}

And if you'd like to get even fancier, take a look at my response to this question https://stackoverflow.com/a/52416148/1513083

GreyRoofPigeon · Accepted Answer · 2013-06-25 13:05:34Z

7

I edited your: Fiddle

html, body{ margin:0; padding:0; overflow:hidden; height:100% }
.header { margin: 0 auto; width:500px; height:30px; background-color:#dadada;}
.wrapper{ margin: 0 auto; width:500px; overflow:scroll; height: 100%;}

Giving the html-tag a 100% height is the solution. I also deleted the container div. You don't need it when your layout stays like this.

answered Jun 25, 2013 at 13:05

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

1 Comment

user2493730 Over a year ago

Thanks its working, but am using coder slider concept its having main container div, the header area i have three div should fixed, inside wrapper content area only should be scrolling, You said remove the container so how can i fix this issue any other way pl ?

user14394673 · Accepted Answer · 2021-09-28 09:00:02Z

I made the required changes and now it will work. Please check the below changes I made to ".wrapper":

.wrapper {
  position: relative;
  max-height:100vh;
  max-width:100vw;
  overflow:auto;
}

And below is the result:

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%
}

#container {
  width: 1000px;
  margin: 0 auto;
}

.header {
  width: 1000px;
  height: 30px;
  background-color: #dadada;
}

.wrapper {
  position: relative;
  max-height:100vh;
  max-width:100vw;
  overflow:auto;
}

<div id="container">

  <div class="header">
  </div>

  <div class="wrapper">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
    <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
    <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
    <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
    <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
    <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
    <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
    <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
    <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p>
  </div>

</div>

I know I'm late, but I hope someone finds it helpful.

mabbasi · Accepted Answer · 2021-11-30 02:51:39Z

3

solution: overflow just working with display: block;

.container{ 
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
}

and use this tutorial for overscroll-behavior from Google: https://developers.google.com/web/updates/2017/11/overscroll-behavior

answered Nov 30, 2021 at 2:51

mabbasi

813 bronze badges

1 Comment

Aurovrata Over a year ago

no, its the height rule that makes it work. The author of the question already has a div element which is display block by default

Anima-t3d · Accepted Answer · 2014-04-03 14:02:48Z

1

I wanted to comment on @Ionica Bizau, but I don't have enough reputation.
To give a reply to your question about javascript code:
What you need to do is get the parent's element height (minus any elements that take up space) and apply that to the child elements.

function wrapperHeight(){
    var height = $(window).outerHeight() - $('#header').outerHeight(true);
    $('.wrapper').css({"max-height":height+"px"});      
}

Note
window could be replaced by ".container" if that one has no floated children or has a fix to get the correct height calculated. This solution uses jQuery.

answered Apr 3, 2014 at 14:02

Anima-t3d

3,5856 gold badges41 silver badges57 bronze badges

2 Comments

GlennG Over a year ago

It's a CSS problem why use Javascript?

Anima-t3d Over a year ago

Because the OP asked for CSS/Javascript solution. There was already a good CSS solution and I believe at the time the OP asked in a comment on the most voted answer on how to do it in JS. But it's been a few years so I might remember wrong ;-)

Tomch · Accepted Answer · 2022-02-16 16:57:33Z

1

In case others are having trouble getting @Ionică Bizău's answer to work, you may want to also add pointer-events: auto; to the wrapper with overflow: scroll

.wrapper {
    pointer-events: auto;
    position: relative;
    overflow: scroll;
    width: 1000px;
    height: 800px;
}

If wrapper has a parent with pointer-events: none, the scroll won't work. Possibly will save someone some time.

answered Feb 16, 2022 at 16:57

Tomch

1012 silver badges3 bronze badges

Comments

Abstergo · Accepted Answer · 2023-01-17 20:00:45Z

1

in my case stylling it inline with "styles" parameter was the problem, when i created class for div and then styled it it worked, and yes you need to specify height

answered Jan 17, 2023 at 20:00

Abstergo

192 bronze badges

Comments

Abhishek Kumar · Accepted Answer · 2021-06-29 08:20:29Z

0

These all solution are good , but if you want to add vertical scroll and don't want to change div height then you can use margin-top:40px; like that to take all the things in position and so it can remain in container and scroll nicely and update the margin-top value as per you requirements.

thanks

answered Jun 29, 2021 at 8:20

Abhishek Kumar

1122 silver badges11 bronze badges

Comments

Code.king · Accepted Answer · 2025-01-09 10:46:31Z

0

Most of all above answers are right and fix the issue depend on case,

let me give a summary to help in multiple cases , to show scroll bar for div (vertical, or horizontal or both) using overflow: scroll; , or overflow-y: auto; you must has height or max-height set for div to activate using scroll bar in case of vertical one and so width or max-width set in case of horizontal scrollbar.

answered Jan 9 at 10:46

Code.king

471 silver badge4 bronze badges

1 Comment

Gaurav Mall Jan 16 at 4:08

This is a duplicate and has been answered multiple times in different wordings before.

Marco Ico · Accepted Answer · 2023-06-21 09:43:50Z

-1

got the same issue, but fixed with min-width and min height

min-height:'value' min-width:'value'

I know that this issue is old but in case you encountered this issue you can try that.

answered Jun 21, 2023 at 9:43

Marco Ico

1

2 Comments

Aurovrata Over a year ago

Min-height does work, you need a to give a height

Kalnode Over a year ago

For others, can you explain where to put min-height and min-width? Otherwise the answer is too vague.

Marc Lloyd · Accepted Answer · 2013-06-25 10:50:26Z

-2

Try this for a vertical scrollbar:

overflow-y:scroll;

answered Jun 25, 2013 at 10:50

Marc Lloyd

3041 silver badge7 bronze badges

2 Comments

R.R Over a year ago

But if you are on a Mac with only trackpad, this would not work either.

Aurovrata Over a year ago

The author of the question alerady has overflow set to scroll, he's missing a height rule

Post Impatica · Accepted Answer · 2017-03-24 15:08:22Z

-3

For Angular2 + Material2 + Sidenav, you'll need to do the following:

 ngAfterViewInit() {
   this.element.nativeElement.getElementsByClassName('md-sidenav-content')[0].style.overflow = 'hidden'; 
  }

edited Mar 24, 2017 at 15:08

user5147563

answered Dec 19, 2016 at 16:06

Post Impatica

16.7k11 gold badges73 silver badges86 bronze badges

2 Comments

angularconsulting.au Over a year ago

any more details on that? why couldn't you just put overflow:hidden in css in case of material2?

Jörg Over a year ago

You are not answering the actual question here, that was not about angular nor material nor about making overflow hidden. So IMHO you answer is misplaced here.

Collectives™ on Stack Overflow

Overflow Scroll css is not working in the div

17 Answers 17

`overflow-y`

4 Comments

3 Comments

2 Comments

Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

2 Comments

Comments

Comments

Comments

1 Comment

2 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

17 Answers 17

overflow-y

4 Comments

3 Comments

2 Comments

Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

2 Comments

Comments

Comments

Comments

1 Comment

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`overflow-y`