2
問題
在我的設置我有一個包含幾個固定寬度的兒童和若干可變兒童一個根元素內聯塊母體代替。 「固定寬度」是指元素的寬度不是由元素外部發生的任何事情決定的。 （它們必須是內聯塊，並且不能內聯。）根元素應該適合最寬的固定寬度子元素，並且所有變量子元素都應該適合根元素。但是，可變寬度的子元素可以包含內聯塊，該內聯塊會溢出其父項。這就是讓我頭痛的原因。因爲只要可變元素的孩子保持足夠小，我的設置就可以工作。但是，當他們比父母的客戶寬度大時，變量元素突然開始適合他們的孩子而不是他們的父母，我不知道如何迫使他們不要。力塊元件，以適應的內聯塊內容
例考慮下面的簡化示例。在這種情況下，白色框是固定寬度的元素，綠色框是根元素，黃色框是可變的。
白色方塊設置爲200px，綠色方塊自動適合，黃色方塊自動適合。然而，當你將它懸停時，橙色框會展開，而不是隻溢出黃色框（這正是我想要的），它會推動黃色框並將其根元素進一步向右移動。
我怎樣才能達到我想要的？在標籤上
.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;
}
.outer:hover .label {
width: 300px;
}<div class="outer">
<div class="first">foo</div>
<div class="second">
<div class="label">
bar
</div>
</div>
</div>