justify-content spaceを使用するときにdivを固定する方法

Question

ページの上部に2つのdiv（左のアイテムのコンテナ、右のアイテムのコンテナ）を追加しようとしています。左のアイテムのコンテナ一定 。私は、ページがスクロールされるときに左の項目を修正したいと思っています。適切な項目をスクロールして非表示にする必要があります。

divの間にもスペースを入れたいと思います。

.mydiv{ 
display:flex 
justify-content: space-between; 

.left-item-container{ 
position: fixed; 
} 
.right-item-container{ 
} 
} 

ポジションを除外すると、作業間のスペースがきれいになりますが、固定された位置が緩んでいます。

左の項目を固定し、両方のdivが表示されている間にスペースを入れると助けが必要です。

Answer 1

コンテナの高さを指定するだけでなく、左のコンテナに正当な内容のフレックススタートを適用することで、固定しておくことができます。

.mydiv{ 
display:flex; 
justify-content: space-between; 

.left-item-container{ 
border: 10px solid red; 
justify-content:flex-start; 
position:fixed; 
height:30px; 
} 
.right-item-container{ 
    border:10px solid blue; 
    height:20px; 
} 
} 

あなたが持っているものHTMLこのjsfiddle