html - 如何在最新版本的主要浏览器中规范化 flex 元素的隐含最小宽度

Question

编辑这可能接近重复，但不幸的是，该问题的答案对 IE 11 没有任何作用。IE 是要求跨浏览器解决方案的问题的隐含要求。

我有一个 jsfiddle显示问题。

第一个.flex-container最接近我的应用程序中的构建方式。这在 chrome 中“正确”呈现，但如果您在 IE 11 或 Firefox ≈38 中将其拉起，输入会溢出父级 .flex-container .

这个问题似乎没有列在known issues on caniuse.com中.我不能直接将其归因于 these flexbugs 之一要么。

有人可以阐明这种不一致吗？

这是 Chrome 的渲染图:

这是 IE 11 中的一个:

我已尝试将示例与后续容器缩减，输入似乎是问题所在。异常(exception)是在第二个 Chrome 容器中，其中存在 <label>元素似乎稍微偏离了宽度计算。

我真的不想在 .flex-container 的直接子级上定义宽度如果我不需要的话。我想使用 flex-grow 的简单性属性，以便我可以在稍后添加子项。

谢谢。

Answer 1

问题是 Flexbox 模块更改了 min-width 的初始值:

4.5 Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.

Chrome 还没有实现它，这就是它似乎在那里工作的原因。

在 Firefox 上，您可以使用 How can I get FF 33.x Flexbox behavior in FF 34.x? 修复它

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css';
@import 'http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css';
html {
  font-size: 62.5%;
}
body {
  font-family:"Segoe UI", "Open Sans", Arial, sans-serif;
  font-size: 1.4rem;
  line-height: 1.42857143;
  background-color: #424242;
}
* {
  box-sizing: border-box;
}
.flex-container, .input-group, .input-group-btn {
  display:flex;
}
.flex-container {
  width:600px;
  border: 1px solid red;
  padding: 1.6rem;
  margin: 1.6rem;
}
.flex-container > * + * {
  margin-left: 2.5rem;
}
label {
  margin-bottom: 5px;
  font-size: 1.8rem;
  color:white;
}
.form-control {
  flex-grow:1;
  height: 50px;
  padding: 0.6rem 12px;
  border:0 none;
  text-align:center;
}
.input-group-btn {
  flex-basis: 62px;
  flex-shrink:0;
}
.input-group-btn button.btn {
  flex-grow: 1;
  flex-shrink:0;
  border: 0 none
}
.input-group-btn > .btn {
  position: relative;
}
.form-control, .input-group-btn .btn {
  font-size: 2.4rem;
}
.input-group .input-group-btn > .btn {
  border-top: 0 none;
  border-bottom: 0 none;
}
.flex-item {
  background: white;
  height: 50px;
}
.flex-container > * {
  flex: 1 1 auto;
  min-width: 0;
}
.form-control {
  min-width: 0;
  max-width: 100%;
}

<div class="flex-container">
  <div class="form-group">
    <label class="control-label">Start Date</label>
    <div class="input-group date date-picker">
      <input class="form-control" type="text" placeholder="mm/dd/yy"/>
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">
          <i class="fa fa-calendar"></i>
        </button> 
      </span> 
    </div>
  </div>
  <div class="form-group">
    <label class="control-label">End Date</label>
    <div class="input-group date date-picker">
      <input class="form-control" type="text" placeholder="mm/dd/yy" /> 
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">
          <i class="fa fa-calendar"></i>
        </button> 
      </span> 
    </div>
  </div>
</div>
<div class="flex-container">
  <div class="form-group">
    <label class="control-label">Start Date</label>
    <input class="form-control" name="start-date" type="text" placeholder="mm/dd/yy" />
  </div>
  <div class="form-group">
    <label class="control-label">End Date</label>
    <input class="form-control" name="end-date" type="text" placeholder="mm/dd/yy" />
  </div>
</div>
<div class="flex-container">
  <input class="form-control" name="start-date" type="text" placeholder="mm/dd/yy" />
  <input class="form-control" name="end-date" type="text" placeholder="mm/dd/yy" />
</div>
<div class="flex-container">
  <div class="flex-item">asdf</div>
  <div class="flex-item">asdf</div>
</div>

但是，IE 还需要其他的改变:

.flex-container > * {
  flex: 1; /* Use `flex-basis: 0%` instead of your `auto` */
}
.form-control {
  width: 100%;
}

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css';
@import 'http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css';
html {
  font-size: 62.5%;
}
body {
  font-family:"Segoe UI", "Open Sans", Arial, sans-serif;
  font-size: 1.4rem;
  line-height: 1.42857143;
  background-color: #424242;
}
* {
  box-sizing: border-box;
}
.flex-container, .input-group, .input-group-btn {
  display:flex;
}
.flex-container {
  width:600px;
  border: 1px solid red;
  padding: 1.6rem;
  margin: 1.6rem;
}
.flex-container > * + * {
  margin-left: 2.5rem;
}
label {
  margin-bottom: 5px;
  font-size: 1.8rem;
  color:white;
}
.form-control {
  flex-grow:1;
  height: 50px;
  padding: 0.6rem 12px;
  border:0 none;
  text-align:center;
}
.input-group-btn {
  flex-basis: 62px;
  flex-shrink:0;
}
.input-group-btn button.btn {
  flex-grow: 1;
  flex-shrink:0;
  border: 0 none
}
.input-group-btn > .btn {
  position: relative;
}
.form-control, .input-group-btn .btn {
  font-size: 2.4rem;
}
.input-group .input-group-btn > .btn {
  border-top: 0 none;
  border-bottom: 0 none;
}
.flex-item {
  background: white;
  height: 50px;
}
.flex-container > * {
  flex: 1;
}
.form-control {
  min-width: 0;
  width: 100%;
}

<div class="flex-container">
  <div class="form-group">
    <label class="control-label">Start Date</label>
    <div class="input-group date date-picker">
      <input class="form-control" type="text" placeholder="mm/dd/yy"/>
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">
          <i class="fa fa-calendar"></i>
        </button> 
      </span> 
    </div>
  </div>
  <div class="form-group">
    <label class="control-label">End Date</label>
    <div class="input-group date date-picker">
      <input class="form-control" type="text" placeholder="mm/dd/yy" /> 
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">
          <i class="fa fa-calendar"></i>
        </button> 
      </span> 
    </div>
  </div>
</div>
<div class="flex-container">
  <div class="form-group">
    <label class="control-label">Start Date</label>
    <input class="form-control" name="start-date" type="text" placeholder="mm/dd/yy" />
  </div>
  <div class="form-group">
    <label class="control-label">End Date</label>
    <input class="form-control" name="end-date" type="text" placeholder="mm/dd/yy" />
  </div>
</div>
<div class="flex-container">
  <input class="form-control" name="start-date" type="text" placeholder="mm/dd/yy" />
  <input class="form-control" name="end-date" type="text" placeholder="mm/dd/yy" />
</div>
<div class="flex-container">
  <div class="flex-item">asdf</div>
  <div class="flex-item">asdf</div>
</div>