在包含<pre> code</pre> </form> </fieldset>时，<fieldset>不会调整<form>的宽度

Question

我有以下代码。

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>的宽度，使其宽度与<form>相适应？

Answer 1

设置min-width:0的{​​{1}}可以解决问题。 从<fieldset> resizes wrong; appears to have unremovable `min-width: min-content`

得到了这个想法

＆＃13;

＆＃13;

<fieldset>

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;