Проблема в firefox с "overflow"

[BeetleJuice]

В Фаерфокс возникла проблема с overflow: auto. Например, есть  блок с  display: table, а в нем два блока с display: table-cell, назовем их .one и .two. В блоке .two абсолютно позиционированный блок .child, количество контента в котором не известно, т.е при необходимости, у блока-родителя .two должна появляться полоса прокрутки. Я задал overflow: auto для этой цели блоку .two. Но в фаерфокс контент по-прежнему вылезает за границы, в хроме все нормально. В чем проблема, подскажите? Где-то я что-то упустил или это проблема в firefox?

Вот ссылка, собственно, для наглядности: https://jsfiddle.net/wfq1z9u2/1/

[Great Rash]

Попробуйте для блока с display: table; дописать правило table-layout: fixed;

[BeetleJuice]

Попробуйте для блока с display: table; дописать правило table-layout: fixed;

Попробовал, не помогло 

[raptor-dm]

попробуйте внутри блока с table cell создать блок с inline block и уже относительно него позиционировать.

Edited March 6, 2015 by raptor-dm

[BeetleJuice]

попробуйте внутри блока с table cell создать блок с inline block и уже относительно него позиционировать.

Создал дополнительную обертку, позиционировал относительно нее, но при display: inline-block контент вообще пропадал из виду, почему-то, а вот при display: block появляется полоса прокрутки, но контент в левой колонке, который помещается по высоте и нормально располагался там, просто выскакивает куда-то вниз, за границы родителя(именно в firefox): https://jsfiddle.net/wfq1z9u2/9/

Edited March 6, 2015 by BeetleJuice

[SelenIT]

Судя по всему, всё-таки баг файрфокса. Очень древний (впрочем, за время его существования сама спецификация менялась как угорелая, так что очень долго не было понятно, какое поведение в этом случае правильное).

 

Может, попробовать уйти от table-* к флексбоксам?

[BeetleJuice]

Судя по всему, всё-таки баг файрфокса. Очень древний (впрочем, за время его существования сама спецификация менялась как угорелая, так что очень долго не было понятно, какое поведение в этом случае правильное).

 

Может, попробовать уйти от table-* к флексбоксам?

Да, можно попробовать. Думал, может есть какое-то решение, но там не одно, так другое.  Всем спасибо за отклики.

Edited March 6, 2015 by BeetleJuice

[Светлана Г.]

В Фаерфокс возникла проблема с overflow: auto. Например, есть  блок с  display: table, а в нем два блока с display: table-cell, назовем их .one и .two. В блоке .two абсолютно позиционированный блок .child, количество контента в котором не известно, т.е при необходимости, у блока-родителя .two должна появляться полоса прокрутки. Я задал overflow: auto для этой цели блоку .two. Но в фаерфокс контент по-прежнему вылезает за границы, в хроме все нормально. В чем проблема, подскажите? Где-то я что-то упустил или это проблема в firefox?

Вот ссылка, собственно, для наглядности: https://jsfiddle.net/wfq1z9u2/1/

 

В Вашем примере закрыты не все <div>-ы.

[Светлана Г.]

Так: https://jsfiddle.net/wfq1z9u2/12/ ?

 

Локально у меня нет горизонтальной прокрутки. А в песочнице почему-то появилась.

Edited March 6, 2015 by Светлана Г.

[BeetleJuice]

Так: https://jsfiddle.net/wfq1z9u2/12/ ?

 

Локально у меня нет горизонтальной прокрутки. А в песочнице почему-то появилась.

Да похоже так, спасибо! Попробую на деле

 

Судя по всему, всё-таки баг файрфокса. Очень древний (впрочем, за время его существования сама спецификация менялась как угорелая, так что очень долго не было понятно, какое поведение в этом случае правильное).

 

Может, попробовать уйти от table-* к флексбоксам?

Сделал на флексбоксе,  в итоге выплыл баг на ИЕ10-11, он неправильно расчитывает высоту потомков, если задана min-height для родителя, т.е. не заполняется вся высота. С просто height все нормально, но тогда на малых разрешениях всё вылазит))

Edited March 19, 2015 by BeetleJuice