はDIVの充填高さ100％以上

Question

私はこのコードをしようとしている：

HTML：

<div id="cnt"> 
    <div id="left"> 
    I'm left 
    </div> 

    <div id="right"> 
    I'm right 
    <br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br> 
    </div> 
</div> 

CSS：

html,body,#cnt{ 
    height:100%; 
} 
#left { 
    background: #990000; 
    float: left; 
    width: 100px; 
    height: 100%; 
} 

#right { 
    margine-left: 100px; 
    background: #009900; 
} 

質問：どのように私はleftを作るのですかDIVは伸びるように身長が伸びるようにrightですか？

動的コンテンツとして<br>を考えてみましょう。たとえば、それは大きくなる可能性があります。それが利用可能なスペースを埋めるようにするには、右側にflex-grow: 1、その後、親にflexを使用することができます

おかげ

Answer 1

。デフォルトでは、このフレックス行の左右の列は同じ高さになります。

（ところで、あなたは#rightにmargin-rightをスペルミス）

body {margin:0;} 
 
#cnt { 
 
    /* use min-height if you want the content to be at least the window height; 
 
    /* min-height: 100vh; */ 
 
    display: flex; 
 
} 
 
#cnt { 
 
    display: flex; 
 
} 
 
#left { 
 
    background: #990000; 
 
} 
 

 
#right { 
 
    flex-grow: 1; 
 
    background: #009900; 
 
}

<div id="cnt"> 
 
    <div id="left"> 
 
    I'm left 
 
    </div> 
 

 
    <div id="right"> 
 
    I'm right 
 
    <br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br> 
 
    </div> 
 
</div>