html文章标题横向滚动,html – 具有水平滚动条的pre / code元素打破了Firefox上的flex布局...

您只需要在弹性项目.c上设置最小宽度：0.查看我的

answer on this similar question了解更多.

Backstory：flexBox规范引入了一个新的大小调整功能min-width: auto,它强制Flex项目至少与最小内容宽度一样大 – 它们的内容所需的最小宽度,以避免溢出.现在,Firefox是唯一实现这一目标的浏览器,这就是为什么你只看到它.

如果要禁用此行为,只需给flex项目min-width：0.

(你也可以设置溢出：隐藏在flex项目上,如另一个答案在这里,但这是超额的,只有通过强制最小宽度：自动解析为0,通过最小宽度的特殊情况,：自动定义,缺点是溢出：hidden还强制浏览器进行额外的工作来管理flex项目的不可见的可滚动区域,而且在内存和性能方面有非零的成本,所以更好地避免它,除非你实际上正在使用overflow：隐藏在flex项目上,而你不是,所以最好避免它.)

div,.r {

background: #143;

flex: 0 0 100px;

}

.c {

background: #971;

flex: 1;

min-width: 0;

}

pre {

white-space: pre;

word-wrap: normal;

overflow-x: auto;

}

this must be 100px wide

this must take the remaining space

this must be 100px wide

this must be 100px wide

The following line of code is long:

This is the long line of code the prevIoUs line of code was referring to (no,sorry for the inconvenience)

Some other content in the c column.

this must be 100px wide