CSS子网格元素溢出问题[重复]答案

【问题标题】：CSS subgrid element overflow issue [duplicate]CSS子网格元素溢出问题[重复]
【发布时间】：2018-10-31 06:39:51
【问题描述】：

我的子网格元素存在溢出问题。考虑以下代码，通过overflow-wrap禁止子网格中的第二个元素溢出。这可行，但 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>

【问题讨论】：

仅供参考，您的代码在 Chrome / Edge 与 Firefox 中的呈现方式不同。它们之间的溢出是不同的。 jsfiddle.net/h4kqbygq
我认为 subgrid 现在还不是标准。
你是对的！乍一看，它对我来说是正确的。过了一会儿，我意识到它并没有真正做任何事情。我现在要为子网格使用 clearfix 布局......显然网格并没有像人们希望的那样准备好生产。或者我错过了什么......
subgrid 功能尚未在任何主流浏览器中实现。所以你是正确的@johnny。但是在上面的代码中找不到display: subgrid。所以我只是认为提问者以通用方式使用术语“子网格”，好像在说“嵌套容器”，这就是代码中存在的内容。
如果您实际上是在询问display: subgrid，请查看此帖子：stackoverflow.com/q/47929369/3597276

标签： html css responsive-design css-grid

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

这会导致段落中的所有单词都包含中间词，我想避免这种情况。