Предотвращение ребенка от увеличения ширины родительского

Question

У меня очень широкий table внутри div, который в свою очередь находится внутри fieldset, который находится внутри form, который находится внутри article.

Этот широкий стол дает div и fieldset, чтобы увеличить их ширину. form не увеличивает ширину.

Я хочу показать горизонтальную полосу прокрутки для div. Но это не работает, потому что оно имеет ту же ширину, что и table.

Как я могу предотвратить увеличение ширины div?
Обратите внимание, что высота table динамична и изменяется на основе пользовательских взаимодействий.
Я хотел бы достичь этого без JS.

Fiddle demonstrating my problem.

Если вы считаете, что это дубликат существующего вопроса, пожалуйста, проверьте сначала решение с моей конкретной настройкой, спасибо. Я тестировал немало, и ни один из них не работал в моем сценарии.

Answer 1

С более глубоким взглядом я заметил, что элемент fieldset имеет атрибут min-width, унаследованный непосредственно из веб-набора (по крайней мере, в Chrome). Похоже, что это противоречит тому, что вы хотите сделать.

Вы можете решить проблему, указав для fieldset элемента:

CSS

fieldset { min-width:0px; } 

Проверить это FIDDLE

---

UPDATE: Исправление, который также работает Firefox

Из объяснения fieldset поведения here (спасибо @Pangloss для ловли это!):

CSS

fieldset { 
    min-width: 0px; 
} 

@-moz-document url-prefix() { 
    fieldset { 
     display: table-cell; 
    } 
} 

Новый FIDDLE