<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> 的宽度，而 <fieldset> 应该适应 <form> 的宽度？

Answer 1

设置 <fieldset> 的 min-width:0 就可以了。灵感来自 <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>

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

<fieldset> doesn't adapt width of <form> when containing <pre> code

html

css

overflow

fieldset

width