Why Don't Fieldsets Resize to Fit Overflowing Content?

Susan Sarandon
Release: 2024-11-17 21:32:01
Original
983 people have browsed it

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template