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>