Question

我遇到了子网格元素的溢出问题。考虑以下代码，子网格中的第二个元素被溢出包装禁止溢出。这样可行，但Gri容器的大小不会增加以使网格元素适合，并且它会流入子网格的第三个项目。我该如何防止这种情况发生？

<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>

Answer 1

将white-space: normal和word-break: break-all添加到.col1。希望这有帮助

.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;
        }

Answer 2

想出来。子网格实际上需要定义为display: subgrid。

CSS子网格元素溢出问题

2 个答案: