html - <fieldset> 在包含 <pre> 代码时不适应 <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的 <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>