代码之家 › 专栏 › 技术社区 › João Menighin

PrismJs没有溢出CSS网格

prismjs css-grid css3 css html

João Menighin · 技术社区 · 7 年前

我有一个页面布局,有一个弹性内容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上生成水平滚动条,而是简单地溢出content 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/

1 回复 | 直到 7 年前

kukkuz 7 年前

网格项 有 min-width: auto min-height: auto (就像 ). 所以你可以 min-width: 0 并添加 oveflow: auto 修理

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