如何将字段集的宽度限制为屏幕的百分比

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％？

---

更新：@rajuGT写了一个小提琴来说明问题： https ://jsfiddle.net/of4dmkmk/2

Answer 1

好吧，字段集具有默认的最小宽度值（最小宽度：最小内容；）

编辑：ehh浏览器兼容性:(在这里，您去： http : //jsfiddle.net/of4dmkmk/4/

Chrome和ff的行为有所不同。 在ff的div中包括Chrome换行字段集的最小宽度

旧答案。 为您的#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

您为什么不只将字段集放在DIV中，然后将div的宽度设置为25％，并将溢出设置为隐藏？