Preflight improvement on fieldset

[Nness]

What version of Tailwind CSS are you using?

For example: v3.1.6

What build tool (or framework if it abstracts the build tool) are you using?

Angular 13

What version of Node.js are you using?

v16.0.0

What browser are you using?

Firefox

What operating system are you using?

Windows

Describe your issue

Current preflight reset for fieldset is below. The problem with fieldset is truncate does not work within fieldset. Due to the minimum width default for fieldset.

fieldset {
  margin: 0;
  padding: 0;
}

Suggest change.

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
}

Today, I have spent more than an hour to try to figure out what's going on with truncate. To avoid others fall into this trap, it would be good to provide as default.

Without min-width:0 following truncate won't work.

<div class="max-w-sm"> 
      <fieldset>
            <div class="truncate">
Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At arcu, sit dui mi, nibh dui, diam eget aliquam. Quisque id at vitae feugiat egestas ac. Diam nulla orci at in viverra scelerisque eget. Eleifend egestas fringilla sapien.
            </div>
     </fieldset>
</div>

[Nness]

Just to add few one more thing. Originally, when I discovered such issue was due to working on horizontal scroll. More specifically, the markdown generated table's horizontal scroll. It does not respect any max-width at all. That remind me of children of display: flex. Similar thing happen if children doesn't have min-width: 0; or min-height: 0; been set.

After I have discovered this, I checked the other project I had. Since I use fieldset a lot there. Then I found Bootstrap's reboot actually reset it.

[r-thomson]

Should it be min-width: 0 or min-width: auto? For what it's worth MDN says that auto is the default value.

[henriksonnergard]

I just ran into this odd behavior as well. Agree that it probably makes sense to add this rule to the reset.