Limit content width in css grid column

Question

I meet a confused problem with CSS grid. I have a grid with 2 columns, the first is 100px, the second is fit the remaining (grid-template-columns: 100px auto). Everything works right. But if the second column has an extra large element, the width of second column is overflow. I tried to use the max-width but it doesn't work.

Here is my fiddle, please check it: 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>

Thank you very much!

Answer 1

Try to add

overflow: auto

Like this:

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

It will fix your trouble! https://jsfiddle.net/ka54e7u4/2/