我有一个<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> tag.
这是一个 JSFiddle 展示了我的意思：https://jsfiddle.net/evdj8taw/1/ https://jsfiddle.net/evdj8taw/1/
在我看来，这是一个组合max-width and width由于没有得到适当执行flex: 1 0 0。例如，如果我改用这个 CSS：
.flex-container > div {
width: 300px; /* or any other static width for that matter */
}
它会工作得很好 - 但显然这不是我想要实现的目标。
任何帮助将不胜感激。
你应该overflow的父级pre标记因为pre会保留空白并且文本中没有换行符或者wrapping- 请参阅下面的演示以及updated fiddle https://jsfiddle.net/08hmp6na/:
.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>
Only pre内容需要滚动
稍微改变你的标记 - 让你的content包装纸aCSS grid container https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout并包裹你的pre in a div inside the 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
