带有字段集的 flexbox CSS 不一致，Firefox 与 Chrome

Question

I've encountered some weird behavior that I would appreciate getting explained or cleared up. Am I perhaps using flex wrong?

https://jsfiddle.net/bxnohfkq/5/

 let $field = $('#field'); let $wrapper = $('#wrapper'); let $button = $('#button'); // display dimensions. $field.val($wrapper.outerWidth() + '×' + $wrapper.outerHeight()); // ??? $button.click((ev) => { if ($wrapper.is('.fix')) { $wrapper.removeClass('fix'); } else { $wrapper.addClass('fix'); } });

 * { box-sizing: border-box; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } #wrapper { max-width: 260px; } #padded { padding: 0.5rem; background-color: tan; } #row { display: flex; } #fieldset_field { flex-grow: 1; } #field { width: 100%; } #button { margin-left: 0.5rem; } .fix fieldset { min-inline-size: unset; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper"> <p>Clicking button fixes the issue in Firefox. In Chrome, it never even comes up in the first place.</p> <div id="padded"> <div id="row"> <fieldset id="fieldset_field"> <input type="text" id="field" /> </fieldset> <fieldset id="fieldset_button"> <button id="button">Ok</button> </fieldset> </div> </div> </div>

I have an input field that pushes a neighboring button out of its wrapper box – but only in Firefox; Chrome doesn't have that issue.

At first, I thought it had something to do with how the user agents use different default widths for the form input field. But it turned out to be a <fieldset> setting: it aligns nicely if I apply min-inline-size: unset; or min-inline-size: min-content; to all fieldsets.

Though, I do not really understand the underlying issue. Documentation suggests that that attribute only ever becomes relevant in regards to the writing direction – which I'm not changing in any way.

Answer 1

You may use flex: 1 1 0; ( flex: [grow] [shrink] [base]; ) instead of only flex-grow: 1; , this way you can also remove the min-inline-size .

 * { box-sizing: border-box; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } #wrapper { max-width: 260px; } #padded { padding: 0.5rem; background-color: tan; } #row { display: flex; } #fieldset_field { flex: 1 1 0; } #field { width: 100%; } #button { margin-left: 0.5rem; }

 <div id="wrapper"> <p>Clicking button fixes the issue in Firefox. In Chrome, it never even comes up in the first place.</p> <div id="padded"> <div id="row"> <fieldset id="fieldset_field"> <input type="text" id="field" /> </fieldset> <fieldset id="fieldset_button"> <button id="button">Ok</button> </fieldset> </div> </div> </div>