在CSS網格列中限制內容寬度

Question

我遇到了CSS網格的困惑問題。我有一個2列的網格，第一個是100px，第二個是適合剩下的（grid-template-columns: 100px auto）。一切正常。但是如果第二列有一個特大的元素，第二列的寬度是溢出的。我試圖使用最大寬度，但它不起作用。

這裏是我的小提琴，請查看：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/