フレックス/グリッド レイアウトでは兄弟アイテムのサイズが制限されています
P粉134288794
P粉134288794 2023-08-24 12:52:48
0
2
411

2 つの兄弟要素があり、それぞれに動的コンテンツが含まれています。

場合によっては、sibling-1sibling-2 より多くのコンテンツが含まれることもあり、その逆も同様です。 2 番目の要素 sibling-2の高さを、最初の sibling-1の高さと常に等しくしたいと考えています。 sibling-2 の高さが sibling-1 の高さより大きい場合、flex div からオーバーフローし、スクロール可能になります。 。

Flexbox を使用してこの効果を実現する方法はありますか?

P粉134288794
P粉134288794

全員に返信 (2)
P粉322918729

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

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

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

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

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

リーリー リーリー

jsフィドル

いいねを押す+0
    P粉008829791

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

    リーリー リーリー
    いいねを押す+0
      最新のダウンロード
      詳細>
      ウェブエフェクト
      公式サイト
      サイト素材
      フロントエンドテンプレート
      私たちについて 免責事項 Sitemap
      PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!