ラッピングブロックの位置を維持する

Question

私はコンテンツラッパーを持つ上部ブロックと、内容ラッパーを内部に持つ2つの等ブロックからなる下部ブロックを持っています。

https://plnkr.co/edit/DTar7Wy5e37HnqbU2Gud?p=preview

<div class="upper"> 
    <div class="wrap"></div> 
</div> 
<div class="bottom"> 
    <div class="left"> 
    <div class="left-wrap"></div> 
    </div> 
    <div class="right"> 
    <div class="right-wrap"></div> 
    </div> 
</div> 

ラッパー・ブロックは、点線の境界線を持っています。

どのように大きくても小さいスクリーンでも、小さい方のブロックは最大のラッパーブロックの半分である150pxの最大幅を持つため、より小さなボトムラップブロックは常に同じ大きさと位置になります-幅。

しかし、下部の合成ブロックの幅を50％から40％および60％に変更すると、小さなラッパーブロックの位置も変更されます。

https://plnkr.co/edit/FTmHxm2F3vD8LhF5DM0d?p=preview

あなたは、いくつかの他の数字（私の例では99と201）に彼らの最大幅を変更することができますが、彼らが常に上位のラップと同じ位置を維持することは不可能と思われます。

したがって、50％の最初の例のように、2番目の例の動作からこれらのラッパーを作成する方法はありますか？

Answer 1

あなたはまた、あなたのボトムブロック内のコンテンツをラップする必要があります。

.wrap-down{ 
    display:flex; 
} 

と.left-contentのdotted black境界線を削除：

<div class="bottom"> 
    <div class="wrap wrap-down"> 
    <div class="left"> 
     <div class="left-content"></div> 
    </div> 
    <div class="right"> 
     <div class="right-content"></div> 
    </div> 
    </div> 
</div> 

があなたのCSSで私が作成した新しい.wrap-downクラスを追加しますおよび.right-content。

upper divブロックを畳んでいるので、.upperクラス（最も近い親）の幅の90％を占めていたという問題がありました。

あなたがダウンしたブロックでは、.bottomクラスの40％と60％を取っていました。これはページの幅の100％で、ラッパーでは90％ではありませんでした場合。

HereあなたはJSFiddleの効果を見ることができます。

これについて疑問がある場合はお知らせください。

EDIT：ThisJSFiddleあなたはあなたより、別の溶液で左と50％のブロックの権利を設定した場合、作品。私は別のパーセンテージでそれを取得しようとしています。新しい変更があった場合は編集します。

EDIT 2：最後に私はあなたの問題の解決策を得ました。 JSFiddleを参照してください。 .leftまたは.rightクラスに置いた％は重要ではありません。これは達成したい効果を作り出します。