Question

Blue inline-block #b with vertical-align: middle is placed inside red #a. At some moment blue #b have full height of its parent.

http://jsfiddle.net/TK2qs/1/

Troublemaker is Opera only [1], which is putting vertical scrollbar on window even when there is some space below red parent #a [2]. The super funny detail is that there is really nothing in markup that seems to occupy extra space below red #a—even document element does not take up this space.

Noted behaviour vanishes when display: inline-block or vertical-align: middle rule of blue #b is discarded. Still, it will be useful to find a solution which keeps both of these rules on.

To reproduce problem in JSFiddle, please drag borders of bottom-right subframe.

Thank you for your attention!

[1_] Checked only in my current version: 12.11.

[2_] Some 40-50 pixels in [jsfiddle.net example][1]. Size varies with red #a height.

Answer 1

http://jsfiddle.net/Mpmgv/

I have found two workarounds myself.

First is to hide overflow of blue #b. The fact that it is a viable solution gives me the thought that invisible big element is probably situated somewhere inside blue #b, and not anywhere else.

Second workaround is to make synthetic absolute-positioned child inside blue #b. And so all content intended to be placed in blue #b will go into synthetic child.

You can check both of these solutions out by adding appropriate class on red #a element.

Still, I wait for and highly appreciate any thoughts about reasons why such a bizarre problem occurs in Opera.