Display:block + overflow:auto, how do they work

Question

Posted some times ago on SO Span to take full height on a TD, as I tried some workaround, I've found a suitable code to do what was expected (the accepted one), but wasn't able to determine why this is working, so why

<td style="padding:0px;">
 <span style="height:100%; width:5px; background-color:pink;">&nbsp;</span>
</td>

make so much difference with

<td style="padding:0px;">
 <span style="height:100%; width:5px; 
    background-color:pink;display:block;overflow:auto">&nbsp;
 </span>
</td>

Here's a jsfiddle to explain more http://jsfiddle.net/7kkhh/2/

Can someone who know in depth the mechanism behind display and overflow explain this? (is it related to this particular situation or is it commonly used ?)

EDITED: This seems to only happen on Chrome

I can't see any difference between both in jsfiddle in my Firefox — bugwheels94, Jun 28 '13 at 13:18
The pink part (far left) is changing, this is maybe browser related, I'm on Chrome and I see a difference — Jaay, Jun 28 '13 at 13:18
Yea I agree with Ankit... in Firefox isn't any difference, only in Chrome (others not tested yet) — Atrox111, Jun 28 '13 at 13:19

score 3 · Accepted Answer · answered Jun 28 '13 at 14:09

A span element is, by default, rendered as an inline-block, just like text-nodes. They collapse around their child elements (or: they take up as much space as their child elements need, but nothing more than that).

A div element is, by default, rendered as a block. They expand to the size of their parent element, unless their child elements don't fit in it. If overflow (actually a shorthand for overflow-x and overflow-y) is auto (default), the element will expand until it's child elements fit. That will in turn expand it's parent elements, unless they have an other value set for overflow. If overflow is scroll, the element will not be expanded if the child elements don't fit in this element, but instead scroll bars will be displayed. If overflow is hidden, the element will not be expanded, but the (parts of) the child elements that are outside the parent element will be hidden (this doesn't mean that you can't scroll the element, but no scroll bars will be visible).

As inline-block conflicts with height: 100%;, the CSS style is ignored while rendering. A table cell has a display value of table-cell or something similar. I am not sure about it's behaviour. Tables and layout are always a troublesome combination to get a consistent layout in different browsers. Validating your document in xhtml-strict will usually help with displaying your document consistently across browsers.

score 0 · Answer 2 · edited May 23 '17 at 12:10

overflow determines what happens if your block does not fit it's given dimensions. This is especially important if you are loading a picture as well. For display you might want to read up on this : SPAN vs DIV (inline-block)

Now the difference: prepare the size of whatever I estimate to be in here and make it pink vs background-color:pink;display:block;overflow:auto"> make it pink now this was actually a block not a span and it it does not fit increase size until it does.

But seems you code shows unwanted behaviour on firefox as well and only works on chrome suggesting that maybe this is not the solution you are after.

The problem is why doing BOTH display:block and overflow:auto result to that — Jaay, Jun 28 '13 at 13:21

Display:block + overflow:auto, how do they work

2 Answers2