在使用最小宽度时，宽度和最大宽度之间有什么区别吗？

Question

如果您指定了width，那么您的<div>通常就是该宽度，但是如果它旁边有一个大型元素，则可以压缩它小于该宽度。

您可以使用min-width来防止您的元素被压缩，但是如果您也不指定width，那么它就会无限增长(以填充容器的全部宽度)。

您还可以使用max-width代替width来指示您的元素不应该更宽。

所以我的问题是，width+min-width和min-width+max-width之间有什么区别吗？

​

div {
  background-color: yellow;
}

.width {
  width: 80px;
}

.min-width {
  min-width: 80px;
}

.width-min-width {
  width: 80px;
  min-width: 80px;
}

.min-max-width {
  min-width: 80px;
  max-width: 80px;
}

.flex {
  display: flex;
  flex-wrap: nowrap;
}

.crusher {
  background-color: red;
  width: 5000px;
}

<div class="width">
  width
</div>

<hr>

<div class="min-width">
  min-width
</div>

<hr>

<div class="flex">
  <div class="width">
    hello world this is a bunch of text
  </div>
  <div class="crusher">
    vroom vroom
  </div>
</div>

<hr>

<div class="flex">
  <div class="width-min-width">
    hello world this is a bunch of text
  </div>
  <div class="crusher">
    vroom vroom
  </div>
</div>

<hr>

<div class="flex">
  <div class="min-max-width">
    hello world this is a bunch of text
  </div>
  <div class="crusher">
    vroom vroom
  </div>
</div>

​

Answer 1

是的有区别。我可以考虑许多例子，但这里有一个与可调整大小的内容相关的基本示例。

​

.box {
  height:50px;
  border:2px solid;
  overflow:hidden;
  resize:horizontal;
  min-width:80px;
}

<div class="box" style="width:80px;">

</div>

<div class="box" style="max-width:80px;">

</div>

​

您可以调整第一个div的大小，但不能调整第二个div的大小。

Answer 2

我确实找到了不同的地方！

在这里很难恢复，所以考虑一下这个半个答案。

在我的站点上，当您使用min-width+max-width时，浏览器会做一些奇怪的事情：

​

​

请注意，“驱动程序”列的范围要大得多，即使它应该切断省略号所在的位置。

"Actions“专栏OTOH被设置为min-width: 1px; max-width: 1px;，它试图通过尽可能的小来尊重它，但仍然达到31.18 to。

现在，如果我使用width+min-width，其结果如下：

​

​

看起来好多了。“驱动程序”列的大小是正确的，即使“动作”列被设置为1 1px，它也不会压碎文本。

(注:没有PII被泄露--这是假数据，不要打电话给Mabel)

Answer 3

最小宽度CSS属性设置元素的最小宽度。它防止宽度属性的使用值小于为最小宽度指定的值。

最大宽度意味着小于或等于在该媒体查询中指定的宽度。