Strange extra height div in google chrome

Question

I have two DIVs:

• the first one is narrow and floats to the left and displays the appearance of the vertical structure of the tab.
• the second displays the content for the selected item in the left div

You can see a simplified example here in the JSFiddle .

As shown in the example, the left DIV is usually higher than the right. Therefore, the right DIV moves vertically down to align it to the bottom of the selected item in the left DIV, so that the content is always displayed when the user selects the item on the left.

Everything works both in Firefox and in IE, but not in Chrome.

Chrome issue

Whenever you select an element in the left DIV that should move the right DIV, the entire container of both gets higher, although not containing DIVs, like heigh.

What seems to be happening here and what am I doing wrong?

Answer 1

Set the ur container on the right side of the div to the position: absolute (for example, the height of the right and left containers should be the same and set the width as your own)

Answer 2

You can hide the extra height added with .container { overflow-y: hidden; }