HTML 输入忽略 flex-basis CSS 属性

Question

为什么输入不能正确感知 flex-basis。这是一个最简单的示例，说明输入如何不服从并跨越其父块（参见 jsfiddle）：

<div>
    <input>
    <input>
</div>

<style>     
    div { display: flex; width: 200px; border: 2px solid red; }
    input { flex-basis: 50%; }
</style>

这里是another, more comprehensive, case。

什么鬼？ :)

Answer 1

input 元素具有 instrinsic width - 弹性项目的宽度（沿弹性轴）默认为 auto。使用 min-width: 0 重置它 - 请参阅下面的演示：

div {
  display: flex;
  width: 200px;
  border: 2px solid red;
}

input {
  flex-basis: 50%;
  min-width: 0; /* ADDED */
}

<div>
  <input>
  <input>
</div>

HTML 输入忽略 flex-basis CSS 属性

HTML inputs ignore flex-basis CSS property

html

css

html-input

flexbox