0

I have a two column page, implemented via flex. The right column is set up to have a small max-width and the left column must take the rest of the page width.

I'm trying to add a pre element into the main column with a nested code inside, but the problem is that I can't make it scroll if the text in it is too wide.

Here's the fiddle to show what I'm doing.

Here's CSS:

.main{
  display: flex;
}
.content{
  flex: 4;
  background-color: yellow;
}
.sidebar{
  flex: 1;
  background-color: lightgreen;
  max-width: 100px;
  min-width: 50px;
}
pre{
  border-radius: 0.3em;
    margin: 1.5em 0;
  background-color: lightblue;
    overflow-x: auto;
    resize: vertical;
}
pre code{
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: break-word;
    tab-size: 4;
    cursor: text;
    font-size: 12px;
    font-family: 'Courier New', Courier, monospace;
  line-height: 1.4;
}

Here's HTML:

<div class="main">
 <div class="content">
  <p>
  Main content goes here.
  </p>
  <pre>
    <code>
      hFile = CreateFileW(fn[2], FILE_WRITE_DATA, 0, 0, CREATE_NEW, FILE_FLAG_NO_BUFFERING|FILE_FLAG_WRITE_THROUGH, 0);
      if(hFile == NULL)
      {
        //Do something
      }
    </code>
  </pre>
 </div>
 <div class="sidebar">
   Side Bar
 </div>
</div>

My goal is to make that pre box shrink horizontally along with the page and provide a horizontal scrollbar it in for the content that doesn't fit into it.

So what am I doing wrong?

c00000fd
  • 20,994
  • 29
  • 177
  • 400
  • 1
    Add overflow-x:auto to .content class and then check. – Rohan Rao Jun 02 '20 at 03:23
  • @noobprogrammer thank you. No wonder, I can't understand this CSS. – c00000fd Jun 02 '20 at 03:26
  • no problem :) If you have tough times understanding css you can visit this website and learn: https://www.w3schools.com/css/default.asp – Rohan Rao Jun 02 '20 at 03:28
  • @noobprogrammer I tried, dude. It just doesn't make any sense to me that to fix an element you have to fix something that is a step above it with a property that has the name with absolutely no significance to the problem itself. ... it's probably me, though :) – c00000fd Jun 02 '20 at 03:31
  • the more accurate fix is to use min-width:0 but overflow in this case is doing the same thing and it has nothing to do with the classic overflowing – Temani Afif Jun 02 '20 at 08:26

0 Answers0