html - 包含<pre>代码时，<fieldset>不能适应<form>的宽度

我有以下代码。

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>的宽度？

最佳答案

设置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>

关于html - 包含<pre>代码时，<fieldset>不能适应<form>的宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28580734/