Questions tagged [overflow]

Overflow is a CSS property which governs what happens if content overflows its containing box. Do not use this tag for stack buffer overflow bugs and vulnerabilities; use [buffer-overflow] and/or [stack-smash] instead.

A CSS property which governs what happens if content overflows its containing box. Possible values are

  • visible: Content is not clipped and the overflow is shown outside of the element.
  • hidden: Content is clipped and the overflow is not shown.
  • scroll: Content is clipped but a scroll bar is shown regardless of whether the content overflows or not.
  • auto: Same as scroll except the scroll bar is only shown if the content actually overflows.
  • inherit: Inherits from the parent element property

Do not use this tag for questions about a stack overflow, buffer overflow or stack smashing error or vulnerability. See the appropriate tag(s) instead: , , .

6236 questions
187
votes
22 answers

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

I have a website here. Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the body has overflow-x:hidden. In any mobile browser, whether Android or iOS, the black menu bar displays its full width,…
Indigenuity
  • 9,332
  • 6
  • 39
  • 68
180
votes
6 answers

Position absolute and overflow hidden

We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV. #first { width: 200px; height: 200px; …
medihack
  • 16,045
  • 21
  • 90
  • 134
176
votes
6 answers

How do I get the real .height() of a overflow: hidden or overflow: scroll div?

I have a question regarding how to get a div height. I'm aware of .height() and innerHeight(), but none of them does the job for me in this case. The thing is that in this case I have a div that is overflown width a overflow: scroll and the div has…
emilolsson
  • 2,008
  • 2
  • 14
  • 16
167
votes
17 answers

How do I remove the horizontal scrollbar in a div?

When I set overflow: scroll, I get horizontal and vertical scrollbars. Is there a way to remove the horizontal scrollbar in a div?
Ravi
  • 4,015
  • 7
  • 30
  • 35
161
votes
7 answers

How to make the overflow CSS property work with hidden as value

I am having a tough time with overflow: hidden. Basically, I am trying to hide the overflow of an unordered list which is located in a
. I have no idea why this isn't working though. Instead of hiding it, it breaks my list from a horizontal…
Darren
  • 10,631
  • 8
  • 42
  • 64
161
votes
4 answers

CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container

I have 3 levels of div: (In green below) A top level div with overflow: hidden. This is because I want some content (not shown here) inside that box to cropped if it exceeds the size of the box. (In red below) Inside this, I have div with position:…
avernet
  • 30,895
  • 44
  • 126
  • 163
156
votes
11 answers

HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?

I want to show terms and condition note on my website. I dont want to use text field and also dont want to use my whole page. I just want to display my text in selected area and want to use only vertical scroll-bar to go down and read all…
Awan
  • 18,096
  • 36
  • 89
  • 131
154
votes
18 answers

Does overflow:hidden applied to work on iPhone Safari?

Does overflow:hidden applied to work on iPhone Safari? It seems not. I can't create a wrapper on the whole website to achieve that... Do you know the solution? Example: I have a long page, and simply I want to hide the content that goes…
Francesco
  • 24,839
  • 29
  • 105
  • 152
149
votes
12 answers

Check whether HTML element has scrollbars

What's the fastest way of checking whether an element has scroll bars? One thing of course is checking whether element is larger than its viewport, which can easily be done by checking these two values: el.scrollHeight > el.offsetHeight ||…
Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
139
votes
14 answers

Find element that is causing the showing of horizontal scrollbar in Google Chrome

When I size my Chrome window to 328 x 455 pixels I still see a horizontal scrollbar. How can I find out which element is causing this? I've been looking at elements via the developer console, but can't find the element. I then tried the script I…
Adam
  • 6,041
  • 36
  • 120
  • 208
138
votes
7 answers

How can I add a vertical scrollbar to my div automatically?

I want to add a vertical scrollbar to my
. I've tried overflow: auto, but it is not working. I've tested my code in Firefox and Chrome. I'm pasting the div style code here: float: left; width: 1000px; overflow: auto;
jay
  • 1,710
  • 2
  • 13
  • 16
133
votes
7 answers

Overflow to left instead of right

I have a div with overflow:hidden, inside which I show a phone number as the user types it. The text inside the div is aligned to right and incoming characters are added to right as the text grows to left. But once the text is big enough not to fit…
Serhat Ozgel
  • 23,496
  • 29
  • 102
  • 138
131
votes
6 answers

CSS: how to get scrollbars for div inside container of fixed height

I have the following markup:

Title

..blah blah blah...
The CSS looks like this: .FixedHeightContainer { float:right; height: 250px; width:250px; …
David
  • 15,750
  • 22
  • 90
  • 150
131
votes
6 answers

Make floating child visible outside an overflow:hidden parent

In CSS the overflow:hidden is set on parent containers in order to allow it to expand with the height of their floating children. But it also has another interesting feature when combined with margin: auto... If PREVIOUS sibling is a floating…
marknadal
  • 7,534
  • 4
  • 25
  • 22
124
votes
4 answers

How to make a div grow in height while having floats inside

How can I make a div grow its height when it has floats inside of it? I know that defining a value for the width and setting overflow to hidden works. The problem is that I need a div with the overflow visible. Any ideas?
pedrozath
  • 2,353
  • 4
  • 20
  • 23