<fieldset> 在包含 <pre> 代码时不适应 <form> 的宽度答案

【问题标题】：<fieldset> doesn't adapt width of <form> when containing <pre> code<fieldset> 在包含 <pre> 代码时不适应 <form> 的宽度
【发布时间】：2015-04-19 06:49:11
【问题描述】：

我有以下代码。

form {
  outline: 3px solid blue;
  width: 50px;
  /* why doesn't it hold? */
}
.container {
  border: 2px solid green;
}
code {
  display: block;
  overflow: auto;
  white-space: pre;
}

<form>
  <fieldset class="container">
    <code>
&lt;some&gt;
	&lt;very&gt;
		&lt;looooooooooooooooooooooooong&gt;
			&lt;html&gt;
				&lt;code&gt;
			&lt;here which=&quot;should break in multiple lines, or be scrollable&quot;&gt;
    </code>
  </fieldset>
</form>

问题是，<fieldset> 似乎适应了内部<code> 元素的宽度，而不是外部<form>。绿框应该包含在蓝框内，代码应该是可滚动的。

但是，绿色的盒子从蓝色的盒子里炸开了：

如何使 <code> 适应 <fieldset> 的宽度，而 <fieldset> 应该适应 <form> 的宽度？

【问题讨论】：

省略<fieldset> 时它可以正常工作 - 但我需要保留它，所以必须有一种方法来设置<fieldset> 的样式，使其也可以工作？
上面的截图是用 Chrome 截取的。 Firefox 将其呈现略有不同：它在宽绿色框周围绘制蓝色框（完全忽略 <form> 的宽度）。

标签： html css width overflow fieldset

【解决方案1】：

设置min-width:0 的<fieldset> 可以解决问题。从<fieldset> resizes wrong; appears to have unremovable `min-width: min-content`得到想法

form {
  outline: 3px solid blue;
  width: 200px;
  /* why doesn't it hold? */
}
.container {
  border: 2px solid green;
}
code {
  display: block;
  overflow: auto;
  white-space: pre;
}
/* This does the trick */

fieldset {
  min-width: 0;
}

<form>
  <fieldset class="container">
    <code>
&lt;some&gt;
	&lt;very&gt;
		&lt;looooooooooooooooooooooooong&gt;
			&lt;html&gt;
				&lt;code&gt;
			&lt;here which=&quot;should break in multiple lines, or be scrollable&quot;&gt;
    </code>
  </fieldset>
</form>

【讨论】：