Question

我在flexbox中有两个输入元素：

<div style="display: flex; width: 200px; background: black; padding: 2px">
  <input style="flex: 1" type="text" />
  <input style="flex: 1" type="text" />
</div>

（fiddle）

我希望那些均匀分享200px的宽度。但他们并非如此。相反，他们有一些神秘的默认大小。他们也不听min-width。他们确实会听width，所以这就是理想的事情：

<div style="display: flex; width: 200px; background: black; padding: 2px">
  <div style="flex: 1">
    <input style="width: 100%" type="text" />
  </div>
  <div style="flex: 1">
    <input style="width: 100%" type="text" />  
  </div>
</div>

（fiddle）

我的问题：为什么？这是出于某种原因定义的吗？

编辑：这是Chrome的检查员给我的：

额外问题：

正如kukkuz指出的那样，min-width 被注意 - 但仅当input是Flex容器的直接子节点时。否则，他们再次希望更广泛：

<div style="display: flex; width: 200px; background: black; padding: 2px">
  <div style="background: red; padding: 2px">
    <input style="flex: 1; min-width: 0" type="text" />  
  </div>
  <div style="background: red; padding: 2px">
    <input style="flex: 1; min-width: 0" type="text" />  
  </div>
</div>

（fiddle）

怪异。有没有办法让这项工作无需重新定位到width: 100%？

修改

有一种方法可以不使用width: 100%：嵌套的flexbox。（fiddle）

＆＃13;

<div style="display: flex; width: 200px; background: black; padding: 2px">
  <div style="background: red; padding: 2px; flex: 1; display: flex; min-width: 0">
    <input style="min-width: 0; flex: 1" type="text" />  
  </div>
  <div style="background: red; padding: 2px; flex: 1; display: flex; min-width: 0">
    <input style="min-width: 0; flex: 1" type="text" />  
  </div>
</div>

＆＃13;

Answer 1

由于用户代理/浏览器，输入元素具有默认的计算宽度。所以它响应width。

您可以设置min-width: 0 - 请参阅下面的演示：

＆＃13;

div {
  display: flex;
  width: 200px;
  background: black;
  padding: 2px;
}

div input {
  min-width: 0;
  flex: 1;
}

＆＃13;

<div>
  <input type="text" />
  <input type="text" />
</div>

＆＃13;

Answer 2

输入元素的宽度行为是神秘的我的问题：为什么？这是出于某种原因定义的吗？

这里没有什么神秘的。没有设置input的{{1}}元素会从其How to access deeply nested dictionaries in Swift获取其大小，默认为width。

根据您的第二小提琴，如果您删除20并将width: 100%设置为size，您会看到它发生变化

由于<div style="display: flex; width: 200px; background: black; padding: 2px"> <div style="flex: 1"> <input style="" type="text" size="5" /> </div> <div style="flex: 1"> <input style="" type="text" size="5" /> </div>属性基于 n 字符数量，因此很难将其用于匹配父集size，因此要么使用CSS属性width或其中一个Flexbox属性width / flex-grow（包含它们）以使它们 ...获得200px均匀共享的宽度

额外问题：
正如所指出的那样，flex-basis是必需的 - 但仅限于此当min-width s是flex容器的直接子节点时。否则，他们又想更广泛奇异。

仍然没有什么奇怪的（或奇怪的），因为当它们不是flex项目（flex容器的子项）时，它们又成为标准input元素并且我的第一个解释适用。

有没有办法让这项工作不用宽度：100％？

是的，正如你建议的那样，嵌套Flexbox使input成为弹性项目，虽然当你只是放弃他们的父母（额外的input包装器）时似乎没有必要这样做。

根据给定的评论，div确实有效，因为弹性项目默认min-width: 0为flex-basis，这是规格。翻译为：

size attribute

在Flex项目上指定时，auto关键字将检索该值   使用的主要大小属性auto。如果那个值是   本身flex-basis，然后使用的值为auto。

这是一个很好的答案（上面的评论是在哪里），可以更深入地解释content

auto

输入元素的宽度行为是神秘的

2 个答案: