flexのdivの固定子がflexプロパティを継承します

Question

私はflexed divの子を持っています。その子のすべてがdomの100％になりたい（他の画面は、後でトランジションで翻訳されます）。私は100%*numChildrenの屈曲した親の幅を与え、各子にwidth 100%;を与えることによってこれを行いました。

これは、これらの子のいずれかにposition fixedのモーダルポップアップがある以外は、期待どおりに機能します。固定されたこの位置はwidthとheightの100%です。しかし、それは実際のdomではなく、数百％の値をベースにしているようです。flex parent。 Absoluteも同じことをします。なぜこれが起こるのですか？どうすれば修正できますか？

1）これを別の方法で行う必要がありますか？

https://developers.google.com/web/updates/2016/06/absolute-positioned-children

Answer 1

代わりのwidth: 100%を使用して、あなたがwidth: 100vwを使用することができます。私はこれを行わない場合、私は子供のwidthsは、私は次の動作を上書きしたい100%.

を満たしていないという問題がありますこれはビューポートの幅を意味します。または、ポップアップの絶対位置付けとフレックスアイテムの相対的な位置決めを使用します。

html, body { 
 
    margin: 0; 
 
} 
 
#container { 
 
    display: flex; 
 
    height: 100vh; 
 
    overflow-x: scroll; 
 
} 
 
#container > div { 
 
    width: 100vw; 
 
    flex-shrink: 0; 
 
    border: 5px solid blue; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
} 
 
.abs { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 100px; 
 
    left: 0; 
 
    border: 5px solid red; 
 
    box-sizing: border-box; 
 
}

<div id="container"> 
 
    <div>1<span class="abs">Absolute</span></div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
</div>