Flexbox 与字段集不一致 CSS，Firefox 与 Chrome

Question

我遇到了一些奇怪的行为，希望得到解释或澄清。是我用错了 flex 吗？

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>

我有一个输入字段，可以将相邻的按钮推出其包装盒 – 但仅在 Firefox 中； Chrome 没有这个问题。

起初，我认为这与用户代理如何为表单输入字段使用不同的默认宽度有关。但事实证明这是一个 <fieldset> 设置：如果我将 min-inline-size: unset; 或 min-inline-size: min-content; 应用于所有字段集，它会很好地对齐。

尽管如此，我并不真正了解根本问题。 Documentation 建议该属性只与写作方向相关——我不会以任何方式改变。

Answer 1

您可以使用 flex: 1 1 0; (flex: [grow] [shrink] [base];) 而不是仅使用 flex-grow: 1;，这样您还可以删除 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>

Flexbox 与字段集不一致 CSS，Firefox 与 Chrome

Inconsistent flexbox CSS with fieldsets, Firefox vs. Chrome

css

google-chrome

firefox

flexbox

fieldset