doesn't adapt width of
when containing
code

Question

I have the following code.

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>

The problem is, that the <fieldset> seems to adapt the width from the <code> element inside, instead of the outer <form>. The green box should be contained inside the blue box, and the code should be scrollable.

But instead, the green box blasts out of the blue box:

enter image description here

How can I make the <code> adapt the width from the <fieldset> which should adapt its width from the <form>?

It works fine when leaving out the `
` - but I need to keep it, so there must be a way to style the `
` in a way it works also? — Simon Ferndriger, Feb 18 '15 at 10:09
The screenshot above was taken with Chrome. Firefox renders it slightly different: it draws the blue box around the wide green box (ignoring the width of the `` completely). — Simon Ferndriger, Feb 18 '15 at 10:29

score 1 · Accepted Answer · edited May 23 '17 at 11:53

Setting min-width:0 of the <fieldset> does the trick. Got the idea from <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>

doesn't adapt width of when containing code

1 Answers1

doesn't adapt width of
when containing
code