Why Don't Fieldsets Resize to Fit Overflowing Content?

Resizing Issue with Minimum Width Constraint

Problem:

elements are not resizing their width as expected when they contain overflowing content.

Cause:

By default,

elements have a minimum width constraint of min-content, meaning they will never be narrower than the intrinsic width of their contents.

Fix:

To override this default behavior, you can set min-width: 0; on the

. However, this only works in WebKit and Firefox 53 .

Gecko-Specific Workaround:

In earlier versions of Firefox, you can additionally set the display property of the

to one of the following values:

• table-cell (recommended)
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

Is @-moz-document Safe?

For this specific issue, using @-moz-document to hide the Gecko-specific workaround from other browsers is justified. However, it is generally not recommended to use @-moz-document to target Firefox.

JavaScript Solution:

If you need to support browsers other than WebKit and Firefox 53 , you can use JavaScript to manually set the width of the

to the desired value.

The above is the detailed content of Why Don't Fieldsets Resize to Fit Overflowing Content?. For more information, please follow other related articles on the PHP Chinese website!