force block元素适合内联块父代替内联块内容

Question

问题

在我的设置中，我有一个根元素，其中包含几个固定宽度的子节点和几个变量子节点。 “固定宽度”是指元素的宽度不是由元素外部发生的任何东西决定的。 （它们必须是内联块，但不能内联。）根元素应该适合最宽的固定宽度子节点，并且所有变量子节点都应该适合根元素。但是，可变宽度子节点可以包含溢出其父节点的内联块。这就是令我头痛的原因。因为只要可变元素的子元素保持足够小，我的设置就可以工作。但是，当他们变得比他们父母的客户宽度更大时，可变元素突然开始适合他们的孩子而不是他们的父母，我不知道如何强迫他们不要。

实施例

考虑下面的简化示例。在这种情况下，白色框是固定宽度的元素，绿色框是根元素，黄色框是变量元素。

白框设置为result，绿框自动适合它，黄色框也自动适合它。然而，当你将鼠标悬停时，橙色框会展开，而不是只是溢出黄色框（这就是我想要的），它会推动黄色框，并将根元素向右推进。

我怎样才能实现我想要的目标？

find_overlapping

200px

Answer 1

在标签上设置最大宽度：

.outer {
  display: inline-block;
  width: auto;
  background: green;
  padding: 5px;
}
.second {
  background: yellow;
}
.second, .first {
  display: block;
  width: 100%;
}
.first {
  background: white;
  width: 200px;
}
.label {
  display: inline-block;
  width: 100px;
  background: orange;
  margin: 5px;
  transition: width ease .5s;
  max-width:190px;
}
.outer:hover .label {
  width: 300px;
}

<div class="outer">
<div class="first">foo</div>
<div class="second">
<div class="label">
bar
</div>
</div>
</div>