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

问题描述

我遇到了一些怪异的行为，如果能得到解释或清理，我将不胜感激。我可能使用flex错误吗？

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>

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

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

但是，我不太了解潜在的问题。 Documentation建议，该属性仅在写作方向上才有意义-我并没有以任何方式对其进行更改。

解决方法

您可以使用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>