Принудительно использовать горизонтальную полосу прокрутки в пред теге, если максимальная ширина превышена?

Question

У меня есть тег <pre> внутри согнутого контейнера, например:

  
    Left side content
  
  
    
The content in here is really long and should overflow but doesn't overflow and instead takes up the space of the left side content and I can't figure out how to add scrollbars
    

С CSS, например, так:

.flex-container {
  display: flex;
  flex-flow: row nowrap;
}
.flex-container > div {
  flex: 1 0 0; /* should be same size and no shrink */
}
.flex-container pre {
  max-width: 100%;
  overflow: auto;
  width: 100%;
}

Но вместо этого он не работает - содержимое правой стороны <div> становится намного больше, занимая дополнительное пространство для размещения содержимого тега <pre>.

ВотJSFiddle показывает, что я имею в виду: https://jsfiddle.net/evdj8taw/1/

На мой взгляд, это комбинация max-width и width, которая не применяется должным образом благодаря flex: 1 0 0.Например, если я вместо этого использую этот CSS:

.flex-container > div {
  width: 300px; /* or any other static width for that matter */
}

Это будет работать нормально - но, очевидно, это не то, чего я пытаюсь достичь.

Любая помощь будет принята с благодарностью.

Answer 1

Применить min-width: 0; для сгибания.

.flex-container > div {
  ...
  min-width: 0;
}

.flex-container {
  display: flex;
  flex-flow: row nowrap;
}

.flex-container > div {
  flex: 1 0 0;
  min-width: 0; /*NEW*/
}

.flex-container pre {
  overflow: auto;
}

  
    Left side content
  
  
    
The content in here is really long and should overflow but doesn't overflow and instead takes up the space of the left side content and I can't figure out how to add scrollbars
    

Answer 2

Вам следует переполнить родительский элемент тега pre, поскольку pre сохранит пробел и у вас не будет разрывов строк в тексте или переноса - см. Демонстрацию ниже и updated fiddle:

.flex-container {
  display: flex;
  flex-flow: row nowrap;
}

.flex-container>div {
  flex: 1 0 0;
  overflow: auto; /* ADDED */
}

.flex-container pre {
  overflow: auto;
}

  
    Left side content
  
  
    Right side content (this works fine)
  



  
    Left side content
  
  
    
The content in here is really long and should overflow but doesn't overflow and instead takes up the space of the left side content and I can't figure out how to add scrollbars
    

Только pre содержимое необходимо прокручивать

Немного измените разметку - сделайте свою контент оболочкой CSS grid container и оберните pre в div внутри контенте обертка.Это гарантирует, что весь раздел content не будет прокручен - см. Демонстрацию ниже:

.flex-container {
  display: flex;
  flex-flow: row nowrap;
}

.flex-container>div {
  flex: 1 0 0;
}

.content {
  display: grid;
}

.pre-content {
  overflow: auto;
}

  
    Left side content
  
  
    Right side content (this works fine)
  



  
    Left side content
  
  
    
      
The content in here is really long and should overflow but doesn't overflow and instead takes up the space of the left side content and I can't figure out how to add scrollbars
      

Lorel ipsum немного текста здесь и больше текста здесь