PrismJs 没有溢出 CSS 网格
PrismJs not overflowing with CSS Grid
我的页面布局具有弹性内容 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
内容填满总 space 减去固定列宽。确实会发生这种情况,除非 div 的内容作为棱镜标签溢出该宽度。
它不是在 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: `
<button
(tap) = "onTapMe()"
text = "tap me" />
`
})
class MainPage {
onTapMe() {
alert("Hello from Angular 2");
}
// long coment pushing the right column further right !!!
}
</code></pre>
</div>
<div class="column">
</div>
</div>
这里有一个工作 fiddle 可以玩:https://jsfiddle.net/4crm25pq/1/
默认情况下 网格项目 有 min-width: auto
和 min-height: auto
(就像 flex 项目 )。因此,您可以设置 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: `
<button
(tap) = "onTapMe()"
text = "tap me" />
`
})
class MainPage {
onTapMe() {
alert("Hello from Angular 2");
}
// long coment pushing the right column further right !!!
}
</code></pre>
</div>
<div class="column">
</div>
</div>
您可以在下面看到此行为的一些示例:
我的页面布局具有弹性内容 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
内容填满总 space 减去固定列宽。确实会发生这种情况,除非 div 的内容作为棱镜标签溢出该宽度。
它不是在 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: `
<button
(tap) = "onTapMe()"
text = "tap me" />
`
})
class MainPage {
onTapMe() {
alert("Hello from Angular 2");
}
// long coment pushing the right column further right !!!
}
</code></pre>
</div>
<div class="column">
</div>
</div>
这里有一个工作 fiddle 可以玩:https://jsfiddle.net/4crm25pq/1/
默认情况下 网格项目 有 min-width: auto
和 min-height: auto
(就像 flex 项目 )。因此,您可以设置 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: `
<button
(tap) = "onTapMe()"
text = "tap me" />
`
})
class MainPage {
onTapMe() {
alert("Hello from Angular 2");
}
// long coment pushing the right column further right !!!
}
</code></pre>
</div>
<div class="column">
</div>
</div>
您可以在下面看到此行为的一些示例: