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个内容需要滚动

稍微更改标记-将{em>内容包装器设置为CSS grid container，然后将pre包装在div 内部 content 包装器。这样可以确保您的整个 content 部分都不会滚动-请参见下面的演示

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

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

2 个答案: