限制 css 网格列中的内容宽度

Question

我遇到了 CSS 网格的困惑问题。我有一个包含 2 列的网格，第一列是 100px，第二列适合剩余的列 (grid-template-columns: 100px auto)。一切正常。但是如果第二列有一个超大元素，第二列的宽度就会溢出。我尝试使用最大宽度，但它不起作用。

这是我的fiddle，请查看：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/

限制 css 网格列中的内容宽度

Limit content width in css grid column

css

css-grid