フレックスボックス - スクロール可能、固定？

Question

フレックスボックスで問題が発生しました。私が取得したいのはここです：

私はフレキシボックススタイルのウィンドウを持っていると思います。画面の2/3を撮っている左に、私はもう少し長く内容を残します。画面の3分の1を取っている右は、左にスクロールしても、常にビューポートの高さを塗りつぶす背景イメージが必要です。

現在のHTML構造は、おおよそ次のようになります。あなたの入力のための

<div class="layout horizontal wrap"> 
     <div class="flex flex-2" id="main-content"> 
      {{ scrollable content }} 
     </div> 
     <div class="flex flex-1" id="image"> 
      {{ fixed image }} 
     </div> 
    </div> 

感謝を！

Answer 1

もちろん、ボディにフレックスを使用しないでください。

html , body { 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
.big { 
 
    width: 66.66%; 
 
    background: #E0E0E0; 
 
    overflow: auto; 
 
} 
 

 
.small { 
 
    width: 33.33%; 
 
    background: blue; 
 
}

<div class="big"> 
 
<h1>Scroll</h1> 
 
<p> 
 
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 
</p> 
 
<p> 
 
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 
</p> 
 
<p> 
 
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 
</p> 
 
<p> 
 
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 
</p> 
 
<p> 
 
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 
</p> 
 
</div> 
 
<div class="small"> Fixed 
 
</div

Answer 2

100VH青DIVのために高さを設定します。 100vhはビューポートの100％です

the-blue-div{ 
    height:100vh; 
}