フレックス/グリッド レイアウトでは兄弟アイテムのサイズが制限されています

Question

<p>2 つの兄弟要素があり、それぞれに動的コンテンツが含まれています。 </p> <pre class="brush:php;toolbar:false;"><div class="flex"> <div class="sibling-1"></div> <div class="sibling-2"></div> </div></pre> <p>場合によっては、<code>sibling-1</code> に <code>sibling-2</code> より多くのコンテンツが含まれることもあり、その逆も同様です。 2 番目の要素 sibling-2 の高さを、最初の sibling-1 の高さと常に等しくしたいと考えています。 <code>sibling-2</code> の高さが <code>sibling-1</code> の高さより大きい場合、<code>flex</code> div からオーバーフローし、スクロール可能になります。 。 </p> <p>Flexbox を使用してこの効果を実現する方法はありますか? </p>

Answer 1

基本的には不可能です。フレックス高さ機能は、特定の兄弟要素ではなく、コンテナーの高さに基づいています。

したがって、兄弟要素 1 と兄弟要素 2 は常に同じ高さにすることができます。

ただし、フレックスボックスには、項目を兄弟要素と同じ高さに制限するメカニズムが組み込まれていません。

JavaScript または CSS の位​​置決めプロパティの使用を検討してください。

絶対位置指定を使用した例を次に示します:

リーリー リーリー

jsフィドル

Answer 2

はい、可能です。兄弟ノードによって設定された最大の高さを保持し、他のノードの flex-basis: 0 および flex-grow: 1 を仕様に従って設定すると、それらは次のように拡張されます。兄弟ノードの高さと同じ高さ。絶対的なポジショニングはありません。どの要素にも高さは設定されていません。

リーリー リーリー