如何在不迫使内容物缩小到最小宽度的情况下，使容器完美地贴合其内容？

Question

让我们说我有一个流体宽度的div（例如，最小宽度为200px，最大宽度为1000px）。我们称这个div为Div1。我想将这个div包装在父div中，我希望这个父div缩小到适合Div1而不会影响Div1的宽度。

根据我的阅读，让父母适应其内容的方法是将父母的显示设置为内联块。但是，每当我这样做时，它似乎会迫使内容缩小到它们的最小宽度。这是codepen上的一个例子 - 我有两个具有完全相同属性的div，但其中一个被强制为其最小宽度，因为它有一个带有display：inline-block的父容器。

http://codepen.io/ahung89/pen/LGqrwz

下面的代码（底部的CSS上的HTML）

<div class="container">
  <div class="div-with-min-width">
    This div is forced to its minimum width.
  </div>
</div>

<div class="div-with-min-width">
  This div is not forced to its minimum width.
</div>

.div-with-min-width {
  border: 1px red solid;
  background: red;
  color: yellow;
  min-height: 100px;
  min-width: 200px;
  max-width: 1000px;
}

.container {
  border: 4px green solid;
  display: inline-block;
}

如何在不实际更改孩子宽度的情况下将父换行设为孩子的宽度？

Answer 1

添加float: left;或float: right;或overflow: hidden;以折叠父元素。