html – 具有水平滚动条的pre / code元素打破了Firefox上的flex
发布时间:2020-12-14 19:36:35 所属栏目:资源 来源:网络整理
导读:在我的基于Flexbox的布局中,我可能有 pre code / code / pre元素(以及其他元素).由于其内容可能比容器宽,因此我将其设置为overflow-x:auto. 它完美地在Chrome上运行: 但是在Firefox上它是坏的: 如何在没有硬编码尺寸的情况下解决这个问题? div,pre { pad
在我的基于Flexbox的布局中,我可能有< pre>< code>< / code>< / pre>元素(以及其他元素).由于其内容可能比容器宽,因此我将其设置为overflow-x:auto.
它完美地在Chrome上运行: 但是在Firefox上它是坏的: 如何在没有硬编码尺寸的情况下解决这个问题? div,pre { padding: 5px; color: white; } .m { background: #222; display: flex; } .l,.r { background: #143; flex: 0 0 100px; } .c { background: #971; flex: 1; } pre { white-space: pre; word-wrap: normal; overflow-x: auto; } <div class=m> <div class=l>this must be 100px wide</div> <div class=c>this must take the remaining space</div> <div class=r>this must be 100px wide</div> </div> <div class=m> <div class=l>this must be 100px wide</div> <div class=c> <pre><code>The following line of code is long: This is the long line of code the previous line of code was referring to (no,it can't be 72 col,sorry for the inconvenience)</code></pre> Some other content in the c column.</div> <div class=r>this must be 100px wide</div> </div> 解决方法
您只需要在弹性项目.c上设置最小宽度:0.查看我的
answer on this similar question了解更多.
Backstory:flexbox规范引入了一个新的大小调整功能 如果要禁用此行为,只需给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; } <div class=m> <div class=l>this must be 100px wide</div> <div class=c>this must take the remaining space</div> <div class=r>this must be 100px wide</div> </div> <div class=m> <div class=l>this must be 100px wide</div> <div class=c> <pre><code>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)</code></pre> Some other content in the c column.</div> <div class=r>this must be 100px wide</div> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |