PrismJs not overflowing with CSS Grid

Question

I have a page layout with a elastic content div and a fixed width column on the right. For that, I have the following basic structure:

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

And the CSS:

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

.content {
  background: tomato;
}

.column {
  background: deepskyblue;
}

I expected the auto content to fill up the total space minus the fixed column width. That happens indeed, except when the content of the div, being a prism tag, overflows that width. Instead of generating an horizontal scroll bar on the PrismJs div, it simply overflows the content div and pushes the column further right.

Any ideas on how to make a scrollbar appear on the div instead of pushing the column?

Note that if I put a fixed value for the content width it works as expected.

Here's an example:

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

Here is a working fiddle to play around: https://jsfiddle.net/4crm25pq/1/

Answer 1

By default grid items have min-width: auto and min-height: auto (just like flex items ). So you can set min-width: 0 and add oveflow: auto to fix this - see demo below:

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

You can see some examples of of this behaviour below:

• css-grid creates an imaginary column
• How to make images stay within the rows of a css grid container?