Как ограничить ширину поля в процентах от экрана

Question

У меня есть набор полей, который я хочу взять 25% от окна браузера.

html, body { 
    padding: 0px; 
    margin: 0px; 
    box-sizing: border-box; 
    height: 100%; 
} 

body:not(:-moz-handler-blocked) fieldset { 
    display: table-cell; 
} 

fieldset { 
    box-sizing: border-box; 
    margin: 0; 
} 

fieldset#rx { 
    width: 25%; 
    max-width: 25%; 
    float:left; 
    height:100%; 
    overflow-y: scroll; 
    overflow-x: scroll; 
} 

Пока набор полей пуст, он правильно занимает 25% ширины окна.

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

Как я могу сделать, чтобы размер поля занимал 25% ширины браузера, даже если он имеет контент?

---

Update: @rajuGT написал скрипку, которая иллюстрирует этот вопрос: https://jsfiddle.net/of4dmkmk/2

Answer 1

Ну, FIELDSET имеет значение по умолчанию мин-значение ширины (мин-ширина: мин-контента;)

Edit: эхх, что совместимость браузера :( Здесь вы идете: http://jsfiddle.net/of4dmkmk/4/

Chrome и далее ведет себя по-разному .. Включают мин-ширину для хрома оберточной FIELDSET в DIV для ффа

Старого ответ для #rx также использовать это:

fieldset#rx { 
    width: 25%; 
    max-width: 25%; 
    min-width: 25%; // I have added this 
    float:left; 
    height:100%; 
    overflow-y: scroll; 
    overflow-x: scroll; 
} 

Answer 2

Почему вы не просто поместить Fieldset внутри DIV, а затем установить ширину Div на 25%, и установить переполнение скрывать?