使用flex基础自动输入从小容器中突破

Question

当外部div带有display: flex，内部div带有flex: 1 0 auto且内部输入带有width: 100%时，该输入会以一定大小跳出容器。这可能是输入的默认最小大小，但是设置min-size: 0不能解决该问题。删除flex基础自动功能确实可以解决该问题，但是我想知道为什么（因为默认flex基础值仍然是auto），以及如何固定它仍要保持flex基础和当前HTML结构尽可能紧密。

示例：https://jsfiddle.net/xjh2635s/

.outer {
  background-color: blue;
  padding: 10px;
  width: 150px;
}

.container {
  display: flex;
}

.inner {
  flex: 1 0;
  flex-basis: auto;
}

input {
  box-sizing: border-box;
  width: 100%;
}

<div class="outer">
  <div class="container">
    <div class="inner">
      <input type="text">
    </div>
  </div>
</div>

Answer 1

  

删除flex基础自动功能可以解决该问题，但是我想知道为什么（因为默认flex基础值为自动）。 。

您正确地将flex-basis的初始值为auto（MDN）。

但是，在使用flex属性时，您已经覆盖了默认值，从而产生了flex-basis: 0。

flex: 1 0的意思是：

• flex-grow: 1
• flex-shrink: 0
• flex-basis: 0

（规范：§ 7.1.1. Basic Values of Flex）

因此，当您删除flex-basis: auto时，代码将退回到flex-basis: 0，并且布局有效。

请注意，您描述的问题存在于Chrome中，但在Firefox和Edge中却不存在，它们的布局与原始代码都可以正常工作。