Why does my not shrink as expected? It seems to have a non-removable min-width: min-content problem.

does not shrink as expected; there appears to be an unremovable min-width: min-content

issue

I have one , one of the text values ​​is very long. I want the to shrink to never be wider than its parent, even if it has to truncate its display text. max-width: 100% should do the trick.

Expected results

Actual result

Workaround

Updated (September 25, 2017)

The Firefox bug described below has been fixed in Firefox 53, and the link to this answer has also been removed from Bootstrap removed from the document.

Also, my sincerest apologies to the Mozilla contributors who had to block removal of support for -moz-document in part due to this answer.

Fix

In WebKit and Firefox 53, you can override the default value of min-content simply by setting min-width: 0; on the fieldset. ¹

Firefox is a little weird when it comes to fieldsets, though. To make this work properly in earlier versions, you must change the fieldset's display property 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

Among them, I recommend table-cell. Both table-row and table-row-group prevent you from changing the width, while table-column and table-column-group prevent you from changing the height.

This (somewhat legitimately) breaks rendering in IE. Since only Gecko needs to do this, you can legitimately hide this effect from other browsers by using one of Mozilla's proprietary CSS extensions, @-moz-document:

@-moz -document url-prefix() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">fieldset {
    display: table-cell;
}

Copy after login

}

(This is a jsFiddle Demo. )

Cause

This solves the problem, but if you're like me, your reaction is probably...

What?

It does have a reason, but it’s not easy to understand. The default rendering of the

fieldset element is ridiculous and essentially impossible to specify in CSS. Think about it: the fieldset's border disappears where it overlaps the legend element, but the background is still visible! No other combination of elements can reproduce this effect.

Most importantly, the implementation is rife with concessions to legacy behavior. One of them is that the minimum width of a fieldset is never less than the intrinsic width of its content. WebKit provides a way to override this behavior by specifying it in the default stylesheet, but Gecko² goes a step further and enforces this behavior in the rendering engine.

However, internal table elements constitute a special frame type in Gecko. Calculating the size constraints for elements with these display value settings is in a separate code path, completely bypassing the minimum width enforced on the fieldset.

Again - Firefox 53 has a bug fix for this issue, so you don't need this fix if you're only targeting newer versions.

Is it safe to use @-moz-document?

For this problem, it is safe. @-moz-document works as expected in all versions of Firefox (until 53, where this bug was fixed).

This is no accident. Partly because of this answer, the bug restricting @-moz-document to user/UA stylesheets was set to first rely on the underlying fieldset bug being fixed.

In addition, do not use @-moz-document in CSS to target Firefox , despite other resources doing so. ³

The above is the detailed content of Why does my not shrink as expected? It seems to have a non-removable min-width: min-content problem.. For more information, please follow other related articles on the PHP Chinese website!