0

I'm trying to get a better understanding of the CSS "overflow" property. In the following example I see overflow:hidden; but the gray background is visible and reaching to the full 300% of the div width.

http://jsfiddle.net/emeRJ/3/

If the overflow is "hidden" I would expect the background to be clipped, not visible. If I change it to "visible" the gray background disappears entirely. I'm confused by this and hope to get a solid understanding of it.

Can someone describe what is happening with the two options? Which element is actually "overflowing"?

I found the above example from a previous question Properties on CSS overflow

If you have an element that has overflow set to something different than "visible", the height of the element will be expand according to the float elements inside.

I gather in this case the width of the element is expanding. However, semantically it makes no sense. If an object is "visible" I expect it to be visible, not hidden, and vice-versa.

Community
  • 1
  • 1
Christopher
  • 5,806
  • 7
  • 31
  • 41

1 Answers1

2

In your example there is no overflow, and thus overflow: hidden is not much relevant other than establishing a block formatting context.

Establishing a block formatting context is just a side-effect which makes the container wrap the floating contents as explained in Floating elements within a div, floats outside of div. Why?

You would see the clipping if the container were narrower than the contents. You can play with the following snippet:

.box {
  width: 200px;
  overflow: hidden;
  background-color: #c3c3c3;
  clear: left;
}
.sub_box {
  float: left;
  width: 400px;
  height: 100px;
  border: 1px solid black;
}
input {
  float: left;
  clear: left;
}
label {
  float: left;
}
#overflow-visible:checked ~ .box { overflow: visible; }
#overflow-visible-bfc:checked ~ .box { overflow: visible; float: left; }
#overflow-hidden:checked ~ .box { overflow: hidden; }
#overflow-scroll:checked ~ .box { overflow: scroll; }
#overflow-auto:checked ~ .box { overflow: auto; }
<input type="radio" name="overflow" id="overflow-visible" checked />
<label for="overflow-visible"><code>overflow: visible</code></label>
<input type="radio" name="overflow" id="overflow-visible-bfc" />
<label for="overflow-visible-bfc"><code>overflow: visible</code> + BFC</label>
<input type="radio" name="overflow" id="overflow-hidden" />
<label for="overflow-hidden"><code>overflow: hidden</code> (BFC)</label>
<input type="radio" name="overflow" id="overflow-scroll" />
<label for="overflow-scroll"><code>overflow: scroll</code> (BFC)</label>
<input type="radio" name="overflow" id="overflow-auto" />
<label for="overflow-auto"><code>overflow: auto</code> (BFC)</label>
<div class="box">
  <div class="sub_box"></div>
  <div class="sub_box"></div>
</div>
Community
  • 1
  • 1
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • Ok, if `overflow: hidden` is establishing a "block formatting context." does this mean the element is being used for something other than its intended purpose? Is there another way to make the background color visible without using the "overflow" property? If I change "overflow: hidden" to "display: block;" in the fiddle example it does not establish "block" formatting. – Christopher Oct 15 '16 at 21:21
  • I also see at http://www.w3schools.com/html/html_blocks.asp "A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can)." It appears that the `div box` is not expanding unless "overflow: hidden" is used. – Christopher Oct 15 '16 at 21:23
  • @Christopher The proper way of establishing a block formatting context is `display: flow-root`, but no browser supports it yet. See other ways [here](http://stackoverflow.com/a/32301823/1529630) – Oriol Oct 15 '16 at 21:24
  • @Christopher No, your div fills all the containing block horizontally. The problem is vertically (it has 0 height). – Oriol Oct 15 '16 at 21:25
  • Ok, thanks. This will take some time to digest. Cool example, thanks! – Christopher Oct 15 '16 at 21:27
  • I see now about the issue of expanding vertically. If I add `height:200px;` to the fiddle example the background becomes visible (without using `overflow`). – Christopher Oct 15 '16 at 21:30
  • I'm not a fan of depending on side effects to make things work in a certain way. However, if the use of `overflow: hidden;` establishes a block formatting context and as a side effect "makes the container wrap the floating contents" which causes the element to expand as shown in the examples, then I will accept this as a "just the way it works", with reservations, and accept the provided answer. I appreciate the explanations. – Christopher Oct 15 '16 at 22:25