1

I thought it was supposed to be simple.

I would let this code snippet just overflow text with scroll, but it seem I'm missing something obvious.

How can I find a way to overflow text on code snippet if the body is smaller than the text of the pre code?

https://codepen.io/vittoriovittori/pen/XWdMyRP

CSS

div {
  border: 1px solid;
}

pre {
  background-color: grey;
  padding: 10px;
  overflow: scroll;
}

code {
  background: pink;
}

.grid {
  display: grid;
  grid-template-columns: 100px auto;
}

HTML

<div class="grid">
  <div>
    stuff
  </div>
  <div>
    this is a text line
    <pre>
      <code>
        this is a very long text which is used to stress this page and trying to understand why i'm stuck on this problem based on the fact i cannot force overflow text on this basic layout which is supposed to be simple to solve.
      </code>
    </pre>
  </div>
</div>
vitto
  • 19,094
  • 31
  • 91
  • 130
  • Use a media query to control the text overflow in combination with a width perhaps? – Andy Holmes Aug 26 '20 at 09:05
  • My problem is the case when i'm on desktop view, and I have two columns, the right column is also more smaller. This should'n be a media query problem, I haven't found a reason why the code snippet is not overflow the text, just like in this page on stack overflow – vitto Aug 26 '20 at 09:09
  • 2
    `min-width: 100%; width: 0; box-sizing: border-box;` to the pre element? – Temani Afif Aug 26 '20 at 09:11

0 Answers0