超过最大宽度时，在预标签中强制使用水平滚动条？

Question

我在弯曲的容器中有一个<pre>标签，如下所示：

<div class="flex-container">
  <div>
    Left side content
  </div>
  <div>
    <pre>
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>
  </div>
</div>

像这样的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

您应该溢出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;
}

<div class="flex-container">
  <div>
    Left side content
  </div>
  <div>
    Right side content (this works fine)
  </div>
</div>

<div class="flex-container">
  <div>
    Left side content
  </div>
  <div>
    <pre>
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>
  </div>
</div>

只有pre内容需要滚动

稍微改变你的标记 - 让你的内容包装为CSS grid container并将你的pre包装在内容包装器中的div中。这可确保您的整个内容部分不会滚动 - 请参阅下面的演示：

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

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

.content {
  display: grid;
}

.pre-content {
  overflow: auto;
}

<div class="flex-container">
  <div>
    Left side content
  </div>
  <div class="content">
    Right side content (this works fine)
  </div>
</div>

<div class="flex-container">
  <div>
    Left side content
  </div>
  <div class="content">
    <div class="pre-content">
      <pre>
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>
    </div>
    <div>Lorel ipsum some text here and more text is here</div>
  </div>
</div>

Answer 2

应用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;
}

<div class="flex-container">
  <div>
    Left side content
  </div>
  <div>
    <pre>
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>
  </div>
</div>