title: word-wrap not working in a CSS Grid item
body: <p>I have a paragraph text without line breaks. It is supposed to be wrapped to a new line if the width exceeds the width of the grid container. It works if the container is not a grid.</p>
  
  <p>I tried the solution from <a href="https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items">Prevent content from expanding grid items</a> but not working. A similar question <a href="https://stackoverflow.com/questions/43427537/word-wrap-in-a-css-grid">word-wrap in a CSS grid</a> seems to be using tables which is outdated and not recommended in HMTL5</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/bvtsan8a/23/" rel="noreferrer">https://jsfiddle.net/bvtsan8a/23/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: grid;
    grid-template-rows: auto;
    width: 500px;
    background: lightsalmon;
    min-width: 0;
    min-height: 0;
    background:peru;
  }
  .child{
    padding:30px;
    margin:30px;
    width:100%;
    background:indigo;
  }
  .item{
    background:indianred;
    padding:30px;
    margin:30px;
    width:100%;
  }
  .item p {
    min-width: 0;
    min-height: 0;
    color:gold ;
    word-wrap: break-word;
    max-width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="child"&gt;
      &lt;div class="item"&gt;
         &lt;p&gt;lolololololololololololololololololololololololololololololololololololololololololo
         lolololololololololololololo&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>