PrismJs 没有溢出 CSS Grid答案

【问题标题】：PrismJs not overflowing with CSS GridPrismJs 没有溢出 CSS Grid
【发布时间】：2019-04-18 01:52:10
【问题描述】：

我有一个页面布局，其中包含弹性内容 div 和右侧的固定宽度列。为此，我有以下基本结构：

<div class="grid">
  <div class="content">
    Content here
  </div>
  <div class="column">
    Fixed right column
  </div>
</div>

还有 CSS：

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto 280px;
    width: 500px;
}

.content {
  background: tomato;
}

.column {
  background: deepskyblue;
}

我预计auto 内容会填满总空间减去固定列宽。确实会发生这种情况，除非 div 的内容（作为 prism 标签）溢出该宽度。它不会在 PrismJs div 上生成水平滚动条，而是简单地溢出内容 div 并将列向右推。

关于如何使滚动条出现在 div 上而不是推动列上的任何想法？

请注意，如果我为内容宽度设置一个固定值，它会按预期工作。

这是一个例子：

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto 280px;
    width: 500px;
}

.content {
  background: tomato;
}

.column {
  background: deepskyblue;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/prism/1.2.0/themes/prism.css">
    <link href="https://cdn.jsdelivr.net/prism/1.2.0/themes/prism-coy.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/prism/1.2.0/prism.js"></script>


<div class="grid">
  <div class="content">
    <pre><code class="language-javascript">@Component({
        selector: "main",
        directives: [],
        template: `
            &lt;button
                (tap) = "onTapMe()"
                text = "tap me" /&gt;
        `
    })
    class MainPage {
        onTapMe() {
            alert("Hello from Angular 2");
        }
        // long coment pushing the right column further right !!!
    }
    </code></pre>
  </div>
  <div class="column">
  
  </div>
</div>

这是一个可以玩的小提琴：https://jsfiddle.net/4crm25pq/1/

【问题讨论】：

标签： html css css-grid prismjs

【解决方案1】：

默认情况下，grid items 有 min-width: auto 和 min-height: auto（就像 flex items）。因此，您可以设置 min-width: 0 并将 oveflow: auto 添加到 fix - 请参阅下面的演示：

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto 280px;
    width: 500px;
}

.content {
  background: tomato;
  min-width: 0; /* added */
  overflow: auto; /* added */
}

.column {
  background: deepskyblue;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/prism/1.2.0/themes/prism.css">
    <link href="https://cdn.jsdelivr.net/prism/1.2.0/themes/prism-coy.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/prism/1.2.0/prism.js"></script>


<div class="grid">
  <div class="content">
    <pre><code class="language-javascript">@Component({
        selector: "main",
        directives: [],
        template: `
            &lt;button
                (tap) = "onTapMe()"
                text = "tap me" /&gt;
        `
    })
    class MainPage {
        onTapMe() {
            alert("Hello from Angular 2");
        }
        // long coment pushing the right column further right !!!
    }
    </code></pre>
  </div>
  <div class="column">
  
  </div>
</div>

您可以在下面看到这种行为的一些示例：

【讨论】：