Overflow property is not applied to body element

Question

My problem is that when I set overflow:hidden or overflow:auto on body element nothing really happens. I tested this on chrome and firefox. It works fine for div elements, but for some reason does not work for body.

You can see what I mean on this fiddle

So my question is if anybody knows why is this happening and how to solve it for body element?

set body `width` to `100%` – Sam Teng Wong Feb 11 '16 at 07:58 — Sam Teng Wong, Feb 11 '16 at 07:58
Set `overflow: hidden;` for `html` too. – Huelfe Feb 11 '16 at 07:59 — Huelfe, Feb 11 '16 at 07:59

BoltClock · Answer 1 · 2016-02-11T08:26:47.527

From the spec:

UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.

In short, setting a value for overflow on just the body element causes that value to be transferred to the viewport, which in turn causes the body element itself to have overflow: visible as the used value.

Changing overflow on both html and body prevents the body element from losing its specified value, because then the viewport takes the value from the html element as opposed to the body element.

Thanks! I never knew this! – Ulan Murzatayev Feb 11 '16 at 08:26 — Ulan Murzatayev, Feb 11 '16 at 08:26

GibboK · Accepted Answer · 2016-02-11T08:16:33.760

2

The following code should solve your issue. You need to apply overflow: hidden; on both body and html

https://jsfiddle.net/b2ap5j86/2/

table {
  border: 1px solid green;
}

td {
  border: 1px solid red;
  width: 100px;
  padding: 5px;
}

body {
  border: 1px solid blue;
  width: 200px;
  overflow: hidden;
}

html {
  overflow: hidden;
}

div {
  width: 200px;
  overflow: hidden;
}

Alternatively you can use div wrapper for your elements and apply overflow: hidden on that, I would suggest this approach as you have better control, example here:

https://jsfiddle.net/b2ap5j86/3/

edited Feb 11 '16 at 08:16

answered Feb 11 '16 at 08:01

GibboK

71,848
143
435
658

thanks GibboK! This indeed solves it, but do you know why it doesn't work just for body element? – Ulan Murzatayev Feb 11 '16 at 08:05
you mean width, in this particular case? – Ulan Murzatayev Feb 11 '16 at 08:17
The screenshot clearly shows the content overflowing the body element horizontally. – BoltClock Feb 11 '16 at 08:25
I think @BoltClock actually answered the "why" part. – Ulan Murzatayev Feb 11 '16 at 08:26

score -1 · Answer 3 · edited Feb 11 '16 at 08:15

Try this code:

table {
  border: 1px solid green;
  table-layout:fixed;/*************define  table-layout****/
  width:100%;   /*************define width here****/
}

td {
  border: 1px solid red;
 /*  width: 100px; /*********remove width here***************/
  padding: 5px;
  
  width:10%;/*************define width here****/
}

body {
  border: 1px solid blue;
  width: 200px;
  overflow: hidden;
}

div{
  width: 200px;
  overflow: hidden;
  
}

<table>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
</table>
<br>
<div>
  <table>
    <tr>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
  </table>
</div>

first run your code and compare outputs – Dhara Feb 11 '16 at 08:10 — Dhara, Feb 11 '16 at 08:10

Overflow property is not applied to body element

3 Answers3