Странная дополнительная высота DIV в Google Chrome

Question

У меня есть два DIV:

• первый - узкий, с плавающей запятой влево и отображает вид вертикальной структуры табуляции.
• второй отображает содержимое для выбранного элемента слева DIV

Вы можете увидеть упрощенный пример здесь, на JSFiddle .

Как показано в примере, левый DIV обычно выше правого. Вот почему правый DIV вертикально смещен вниз, чтобы выровнять его по нижней части выбранного элемента в левом DIV, чтобы содержимое всегда было в поле зрения , когда пользователь выбирает элемент слева.

В Firefox и IE все работает как положено, но не в Chrome.

Chrome Issue

Всякий раз, когда вы выбираете элемент в левом DIV, который должен изменить положение правого DIV, весь контейнер обоих становится выше, даже несмотря на то, что ни один из содержащихся DIV не имеет высоты.

Что здесь происходит и что я делаю не так?

Answer 1

Вы можете скрыть добавленную высоту, используя .container { overflow-y: hidden; }

Answer 2

Установите ваш правый контейнер Div в положение: абсолютное (т.е. высота правого и левого контейнера будет одинаковой, и установите ширину как вашу собственную)