输入元素的宽度行为是神秘的 [英] Input element's width behaviour is mysterious

问题描述

 < div style =display：flex; width：200px;背景：黑色;填充：2px> 
< input style =flex：1type =text/> 
< input style =flex：1type =text/> 
< / div> 
  

（

额外问题：

正如kukkuz指出的那样， min-width 是被注意的 - 但只有当输入 s是flex容器的直接子元素。否则，他们再次想要变得更宽泛：

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

（小提琴）

奇怪。有没有办法让这项工作不重新分配到宽度：100％？

编辑：

有一种方法不需要使用宽度：100％：一个嵌套的flexbox。 （小提琴）

 < 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：1type =text/> < / DIV> < div style =background：red; padding：2px; flex：1; display：flex; min-width：0> < input style =min-width：0; flex：1type =text/> < / div>< / div>  

解决方案

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

这里没有什么神秘的。没有集合 width 的输入元素从它的 size 属性，默认值到 20 。

基于你的第二个小提琴，如果你删除 width：100％ 并将大小设置为 5 ，您会看到它发生变化

< div style =display：flex; width：200px; background：black; padding ：2px> < div style =flex：1> < input style =type =textsize =5/> < / DIV> < div style =flex：1> < input style =type =textsize =5/> < / c>

由于 size 属性是基于 n 字符数量的，因此很难用它来匹配父母的集合 width ，所以或者使用CSS属性 width 或者其中一个Flexbox属性 flex-grow / flex-basis （将它们嵌套）使它们成为 ...获得200px均匀共享的宽度

---

额外问题：

正如所指出的，需要 min-width - 但是当 input s是flex容器的直接子元素时，只有
。
另外，他们再次想要变得更宽泛。

Bizarre。

当它们不是flex项目（flex容器的子项）时，它们又成为标准的 input 元素，我的第一个解释是适用的。

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

是的，当您建议自己的时候，嵌套Flexbox以便 input s变成弹性项目，尽管当您简单地放弃时似乎没有必要这样做他们的父母（额外的 div 包装）。

---

给定的注释， min-width：0 确实可行，因为flex项目默认 flex-basis 是 auto ，这是规格。翻译为：




auto

当在flex项目中指定时， auto 关键字检索main size属性的值
作为使用的柔性基础。如果该值为
本身 auto ，则使用的值为 content 。

下面是一个很好的答案（上面的评论被采纳），解释 flex-basis a更深一层

• flex-basis和width之间有什么区别？

I have two input elements in a 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)

I want those to get the width of 200px evenly shared. They aren't however. Instead, they have have some mysterious default size. They don't listen to min-width either. They do listen to width though, so this does the desired thing:

<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)

My question: why? And is this defined somewhere for some reason?

EDIT: This is what Chrome's inspector gives me:

EXTRA QUESTION:

As kukkuz pointed out, min-width is heeded - but only when the inputs are direct children of the flex container. Otherwise, they again like to be broader:

<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)

Bizarre. Is there a way to make this work without restorting to a width: 100%?

EDIT:

There is a way without resorting to a width: 100%: A nested flexbox. (fiddle)

<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>

解决方案

Input element's width behaviour is mysterious
My question: why? And is this defined somewhere for some reason?

There is nothing mysterious here. An input element without a set width get its size from its size attribute, which defaults to 20.

Based on your 2nd fiddle, if you remove width: 100% and set the size to 5, you'll see it changes

<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>

Since the size attribute is based on n amount of character, it will be difficult to use it to match a parent's set width, so either use the CSS property width or one of the Flexbox properties flex-grow/flex-basis (nesting them included) to make them ...get the width of 200px evenly shared

---

EXTRA QUESTION:
As pointed out, min-width is needed - but only when the inputs are direct children of the flex container. Otherwise, they again like to be broader.
Bizarre.

Still nothing strange (or bizarre), as when they aren't flex items (children of a flex container), they yet again become standard input elements and my first explanation applies.

Is there a way to make this work without resorting to a width: 100%?

Yes, as you suggest your self, nest Flexbox so the inputs become flex items, though it appears unnecessary to do that when you simply can drop their parents (the extra div wrappers).

---

Based on the given comments, the min-width: 0 does work because a flex items default flex-basis is auto, which the specs. translate to:

auto

When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis. If that value is itself auto, then the used value is content.

Here is a great answer (where the above comment is taken), that explain flex-basis a little deeper

• What are the differences between flex-basis and width?

这篇关于输入元素的宽度行为是神秘的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！