为什么元素不支持min-width？

http://jsbin.com/nuzazefuwi/1/edit?html,css,output

In the link above the textbox should have only 10px instead it has a width of 152px.

在上面的链接中，文本框应该只有10px而不是宽度为152px。

This is the code:

这是代码：

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

.cont {
  padding: 2px;
}

.main {
  position: absolute;
  border: 1px solid black;
  min-width: 15px;
}

<div class='main'>
  <div class='cont'>
    <input type="text" class='input' />
  </div>
</div>
<br/>
<br/>
<br/> the textbox should have 10px

It looks like the input starts to get the correct width only after .main min-width is greater than 156px.

看起来输入在.main min-width大于156px之后才开始获得正确的宽度。

4 个解决方案

#1

There is size="20" set on <input> type text, search, tel, url, email, and password ... by default, which is approximately of 100px width, although it can vary in a different browser and operating system.

在类型文本，搜索，电话，网址，电子邮件和密码上设置size =“20”默认情况下，宽度大约为100px，尽管它可能在不同的浏览器和操作系统中有所不同。

On the parent, you have min-width:15px; set, that does not take any effects, because the value is much smaller than 100px. If you change it to width:15px; or max-width:15px; you will then see the differences.

在父级上，你有最小宽度：15px;设置，不会产生任何影响，因为该值远小于100px。如果你把它改成宽度：15px;或最大宽度：15px;然后你会看到差异。

Alternatively you can give the size a very small value such as size="1".

或者，您可以为尺寸指定一个非常小的值，例如size =“1”。

#2

You have a min-width set, but no max-width.

您有一个最小宽度设置，但没有最大宽度。

The textbook has a default size set by the browser. That default size in greater than the min-height, so the both the browser and the css are happy to let that default width take place and increase the width of the container.

教科书具有浏览器设置的默认大小。该默认大小大于最小高度，因此浏览器和css都很乐意让这个默认宽度发生并增加容器的宽度。

By setting a max-width or a width for the container, the container's and input's size will be restricted and their sizes will be computed accordingly.

通过设置容器的最大宽度或宽度，将限制容器和输入的大小，并相应地计算它们的大小。

.main{
  position:absolute;
  border:1px solid black;
  min-width:14px;
  max-width:140px; // What do you want here?
}

I think this is also what @sdcr answered and he also gave you details about the default size and computations.

我认为这也是@sdcr回答的内容，他还向您提供了有关默认大小和计算的详细信息。

#3

change your css width as 155px

将您的CSS宽度更改为155px

.input{  
  width:155px;  //Replace 100% to 155px
 box-sizing:border-box;
 }

#4

The .main container spans the width of the content inside and only if you resize the screen to small size you will see that the input actually fits inside with smaller than the default input width. If you change the width of the .main content you will observe that the input changes it's default width on large screen and shrinks to no less than the min-width value.

.main容器跨越内部内容的宽度，并且只有当您将屏幕大小调整为小尺寸时，您才会看到输入实际上适合内部小于默认输入宽度。如果更改.main内容的宽度，您将观察到输入在大屏幕上更改了它的默认宽度，并缩小到不小于最小宽度值。

.main{
  position:absolute;
  border:1px solid black;
  width: 75px;
  min-width:15px;  
}

http://jsbin.com/xeyupinaja/3/edit

#1