0

I have an overflow issue with a subgrid element. Considering the following code, the second element in the subgrid is prohibited from overflowing by overflow-wrap. This works, but the Gri container does not increase in size to make the grid element fit, and it flows into the third item of the sub grid. How do I prevent this from happening?

<html>

  <style type="text/css">

    body {
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }

    .layout {
      width: 100%;
      display: grid;
      grid-template-columns: 20% 80%;
      grid-template-rows: 100%;
      box-sizing: border-box;
    }

    .left {
      width: 100%;
      grid-column-start: 1;
      grid-column-end: 1;
      box-sizing: border-box;
      word-wrap: break-word;
    }
    .right {
      width: 100%;
      grid-column-start: 2;
      grid-column-end: 2;
      box-sizing: border-box;
    }

    .container {
      box-sizing: border-box;
      margin-left: 4px;
      margin-right: 4px;
      padding-top: 4px;
      padding-bottom: 4px;
      border-bottom: 1px solid black;
      overflow-wrap: break-word;
    }

    .container:last-child {
      padding-bottom: 4px;
      border-bottom: none;
    }

    .grid {
      display: grid;
      grid-template-columns: minmax(auto, 80%) auto;
      grid-template-rows: 100%;
    }

    .col1 {
      grid-column-start: 1;
      grid-column-end: 1;
      grid-row-start: 1;
      grid-row-end: 1;
      justify-self: left;
      align-self: start;
    }

    .col2 {
      grid-column-start: 2;
      grid-column-end: 2;
      grid-row-start: 1;
      grid-row-end: 1;
      justify-self: right;
      align-self: start;
    }

  </style>
  <body>

    <div class="layout">
      <div class="left">
        test
      </div>
      <div class="right">
        <div class="container grid">
          <div class="col1">
            <p>TEST</p>
          </div>
          <div class="col2">
            <p>test</p>
          </div>
        </div>
        <div class="container grid">
          <div class="col1">
            <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
          </div>
          <div class="col2">
            <p>test</p>
          </div>
        </div>
        <div class="container grid">
          <div class="col1">
            <p>TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p>
          </div>
          <div class="col2">
            <p>test</p>
          </div>
        </div>
        <div class="grid">
          <div class="col1">
            <p>TEST</p>
          </div>
          <div class="col2">
            <p>test</p>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>
MG_Bautista
  • 2,593
  • 2
  • 18
  • 33
tohyz
  • 23
  • 3
  • Just FYI, your code renders differently in Chrome / Edge vs Firefox. The overflow is different between them. https://jsfiddle.net/h4kqbygq/ – Michael Benjamin May 21 '18 at 16:09
  • I thought subgrid wasn't a standard right now. – johnny May 22 '18 at 13:43
  • You're right! It only looked correct to me on first glance. A bit later I realized that it doesn't really do anything. I'm going with clearfix layouts for subgrids for now... apparently grid isn't as production ready as one would like it to be. Or I'm missing something... – tohyz May 22 '18 at 15:03
  • 1
    The **`subgrid`** feature is *not* implemented in any major browser yet. So you're correct @johnny. But `display: subgrid` is nowhere to be found in the code above. So I just figured that the questioner was using the term "subgrid" in a generic way, as if to say "nested containers", which is what exists in the code. – Michael Benjamin May 22 '18 at 17:23
  • If you're actually asking about `display: subgrid`, then see this post: https://stackoverflow.com/q/47929369/3597276 – Michael Benjamin May 22 '18 at 17:26

2 Answers2

1

Figured it out. The subgrid actually needs to be defined as display: subgrid.

tohyz
  • 23
  • 3
0

Add white-space: normal and word-break: break-all to .col1 . Hope this helps

.col1 {
          grid-column-start: 1;
          grid-column-end: 1;
          grid-row-start: 1;
          grid-row-end: 1;
          justify-self: left;
          align-self: start;
          white-space: normal;
          word-break: break-all;
        }
Friday Ameh
  • 1,664
  • 1
  • 10
  • 15