CSSグリッド列のコンテンツの幅を制限する

Question

CSSグリッドに混乱している問題を抱えています。私は2列のグリッドを持っています、最初は100ピクセル、残りの2つはフィット（grid-template-columns: 100px auto）です。すべてが正しく機能します。しかし、2番目の列に余分な大きな要素がある場合、2番目の列の幅はオーバーフローします。私は最大幅を使用しようとしましたが、動作しません。

はここに私のバイオリンで、それを確認してください。https://jsfiddle.net/truongwp/ka54e7u4/1/

.container { 
 
    display: grid; 
 
    grid-template-columns: 100px auto; 
 
    grid-gap: 30px; 
 
    width: 400px; 
 
} 
 

 
.right { 
 
    max-width: 100%; 
 
} 
 

 
.text { 
 
    width: 700px; 
 
    max-width: 100%; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus lorem in iaculis dictum. Etiam nec urna et erat volutpat ultrices non vel elit. Nullam commodo tortor a est luctus, et semper ipsum suscipit. Praesent in ipsum quis odio imperdiet posuere 
 
    in vitae leo. 
 
    </div> 
 

 
    <div class="right"> 
 
    <div class="text"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus lorem in iaculis dictum. Etiam nec urna et erat volutpat ultrices non vel elit. Nullam commodo tortor a est luctus, et semper ipsum suscipit. Praesent in ipsum quis odio imperdiet posuere 
 
     in vitae leo. Aliquam facilisis at justo vel pellentesque. Quisque vitae lobortis nibh, commodo facilisis ante. Nullam facilisis leo vel aliquet egestas. Etiam commodo porta lorem pretium suscipit. Morbi finibus est ac ex suscipit, at feugiat magna 
 
     facilisis. Sed tempor ex interdum lobortis gravida. Sed rutrum semper sapien, at finibus metus maximus in. In turpis augue, pellentesque at lectus nec, porta elementum justo. Sed consequat nec dui et interdum. Aenean placerat orci sem, ut blandit 
 
     ex semper sit amet. 
 
    </div> 
 
    </div> 
 
</div>

はどうもありがとうございました！

Answer 1

は、このよう

overflow: auto 

を追加しよう：

.right { 
    max-width: 100%; 
    overflow: auto 
} 

それはあなたの悩みを解決します！ https://jsfiddle.net/ka54e7u4/2/