<Fieldset> Resizes Wrong; Appears to Have Unremovable 'Min-Width: Min-Content'

fieldset resizes wrong; appears to have unremovable `min-width: min-content`

Update (25 Sept 2017)

The Firefox bug described below is fixed as of Firefox 53 and the link to this answer has finally been removed from Bootstrap's documentation.

Also, my sincere apologies to the Mozilla contributors who had to block removing support for -moz-document partly due to this answer.

The fix

In WebKit and Firefox 53+, you just set min-width: 0; on the fieldset to override the default value of min-content.¹

Still, Firefox is a bit… odd when it comes to fieldsets. To make this work in earlier versions, you must change the display property of the fieldset 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

Of these, I recommend table-cell. Both table-row and table-row-group prevent you from changing width, while table-column and table-column-group prevent you from changing height.

This will (somewhat reasonably) break rendering in IE. Since only Gecko needs this, you can justifiably use @-moz-document—one of Mozilla's proprietary CSS extensions—to hide it from other browsers:

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

(Here's a jsFiddle demo.)

That fixes things, but if you're anything like me your reaction was something like…

What.

There is a reason, but it's not pretty.

The default presentation of the fieldset element is absurd and essentially impossible to specify in CSS. Think about it: the fieldset's border disappears where it's overlapped by a legend element, but the background remains visible! There's no way to reproduce this with any other combination of elements.

To top it off, implementations are full of concessions to legacy behaviour. One such is that the minimum width of a fieldset is never less than the intrinsic width of its content. WebKit gives you a way to override this behaviour by specifying it in the default stylesheet, but Gecko² goes a step further and enforces it in the rendering engine.

However, internal table elements constitute a special frame type in Gecko. Dimensional constraints for elements with these display values set are calculated in a separate code path, entirely circumventing the enforced minimum width imposed on fieldsets.

Again—the bug for this has been fixed as of Firefox 53, so you do not need this hack if you are only targeting newer versions.

Is using `@-moz-document` safe?

For this one issue, yes. @-moz-document works as intended in all versions of Firefox up until 53, where this bug is fixed.

This is no accident. Due in part to this answer, the bug to limit @-moz-document to user/UA stylesheets was made dependent on the underlying fieldset bug being fixed first.

Beyond this, do not use @-moz-document to target Firefox in your CSS, other resources notwithstanding.³

¹ Value may be prefixed. According to one reader, this has no effect in Android 4.1.2 Stock Browser and possibly other old versions; I have not had time to verify this.

² All links to the Gecko source in this answer refer to the 5065fdc12408 changeset, committed 29ᵗʰ July 2013; you may wish to compare notes with the most recent revision from Mozilla Central.

³ See e.g. SO #953491: Targeting only Firefox with CSS and CSS Tricks: CSS hacks targeting Firefox for widely referenced articles on high-profile sites.

fieldset width 100% of parent

Browsers have custom css in their default stylesheet for fieldset elements.

On Chrome it has min-width: -webkit-min-content;

You could just set this rule :

.section fieldset{
    min-width: 0;
}

See fiddle:

http://jsfiddle.net/tg5uk25L/4/

Inspect the elements with Firebug, Chrome Dev Tools, aso to see the difference between the div and the fieldset elements in your stylesheet!

fieldset doesn't adapt width of form when containing pre code

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><some> <very>  <looooooooooooooooooooooooong>   <html>    <code>   <here which="should break in multiple lines, or be scrollable">    </code>  </fieldset></form>

FIeldset dont want to shrink below 360px

Use rule max-width: 100% for all children of the fieldset tag. This will allow the children to take a width equal to the width of the window's viewport. To do this, add this to your css:

.form__fieldset * {
    max-width: 100%;
}

Also, override rule min-inline-size: min-content in tag fieldset. Must be overridden to min-inline-size: auto. Add this rule to class .form__fieldset:

.form__fieldset {
    ...
    min-inline-size: auto;
}

Your template is now responsive to the window viewport.

let form = document.querySelector(".form");
let pln = document.querySelector(".form__currency--pln");
let usd = document.querySelector(".form__currency--usd");
let eur = document.querySelector(".form__currency--eur");
let gbp = document.querySelector(".form__currency--gbp");

form.addEventListener("submit", (event) => {
    event.preventDefault();
    let usdResult = pln.value / 3.79;
    let eurResult = pln.value / 4.54;
    let gbpResult = pln.value / 5.25;
    usd.value = usdResult.toFixed(2);
    eur.value = eurResult.toFixed(2);
    gbp.value = gbpResult.toFixed(2);
});

html {
    box-sizing: border-box;
}

*,
::after,
::before {
    box-sizing: inherit;
}

.body {
    font-family: "Open Sans", "sans-serif";
    margin: 0 auto;
    max-width: 1000px;
    background-color: grey;
    color: white;
    font-size: 30px;
}

.form {
    max-width: 100%;
    margin: auto;
    text-align: center;
}

.form__fieldset {
    margin: 0 auto;
    border: 20px solid #05a9be;
    min-inline-size: auto;
}

.form__fieldset * {
    max-width: 100%;
}

.form__button {
    font-size: 30px;
    border: 6px solid #05a9be;
    padding: 5px;
    color: white;
    background-color: grey;
    margin: 5px;
}

.form__button:hover {
    background-color: rgb(170, 164, 164);
    text-decoration: none;
}

.form__currency {
    font-size: 25px;
}

.footer {
    margin: auto;
    background-color: #05a9be;
    text-align: center;
    margin: auto;
    margin-top: 40px;
}

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script defer src="script/script.js"></script>
        <link href="style/style.css" rel="stylesheet" />
        <link href="style/form.css" rel="stylesheet" />
        <link href="style/footer.css" rel="stylesheet" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
            integrity="sha512-oHDEc8Xed4hiW6CxD7qjbnI+B07vDdX7hEPTvn9pSZO1bcRqHp8mj9pyr+8RVC2GmtEfI2Bi9Ke9Ass0as+zpg=="
            crossorigin="anonymous"
        />

        <title>Przelicznik walut</title>
    </head>

    <body class="body">
        <form class="form">
            <div>
                <fieldset class="form__fieldset">
                    <legend>Przelicznik walut</legend>
                    <p>
                        <label class="form__label"> Kwota w PLN: <input class="form__currency form__currency--pln" min="0" type="number" step="any" name="name" required placeholder="Wpisz kwotę" autofocus /> </label>
                    </p>
                    <button class="form__button">Przelicz</button><button type="reset" class="form__button">Wyczyść</button>
                    <p>
                        <label class="form__label"> Kwota w USD: <input class="form__currency form__currency--usd" readonly /> </label>
                    </p>
                    <p>
                        <label class="form__label"> Kwota w EUR: <input class="form__currency form__currency--eur" readonly /></label>
                    </p>
                    <p>
                        <label class="form__label"> Kwota w GBP: <input class="form__currency form__currency--gbp" readonly /> </label>
                    </p>
                </fieldset>
            </div>
        </form>
        <footer class="footer">
            <p>©Wojnowiak Paweł 2021</p>
        </footer>
    </body>
</html>

Input don't resize after a specific size

the input and the button are enclosed in a fieldset, and the browser gives the fieldset a min-width. Either eliminate the fieldset, or add fieldset {min-width:0;} to your css

UPDATE
Fieldset doesn't properly resize in Firefox. It's explained in this stackoverflow article:

<fieldset> resizes wrong; appears to have unremovable `min-width: min-content`

I suggest trying the url it recommends:

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

If that fails, you may have to abandon fieldset.

Why CSS Grid set the width of all items to the min content of the smallest item in a grid?

Since there's only one column all rows will have the same size, and they are based on the header element because it has the largest width. Why that happens? because that's how it is specified, in other words, the default behaviour.

In both inline and block formatting contexts, the grid container’s auto block size is its max-content size.

If you had defined the column size with the grid-template-columns property the following would apply.

The max-content size (min-content size) of a grid container is the sum of the grid container’s track sizes (including gutters) in the appropriate axis, when the grid is sized under a max-content constraint (min-content constraint).

I'm not an expert at these documents btw.

Edit: does that answer your question?

<Fieldset> Resizes Wrong; Appears to Have Unremovable 'Min-Width: Min-Content'