前代码块在居中的 flex 容器中将内容拉伸到屏幕宽度之外

要调整填充/边框的宽度，您可以使用 box-sizing: border-box;(我这样做)或 CSS Calc (width: calc(100% -22px);)此外，由于 Michael 给出的原因，我删除了 min-width: 0 因为它没有效果更新代码笔堆栈片段.Page {边框:1px纯蓝色；}.容器 {显示:弹性；弹性方向:列；对齐项目:居中；}.内容 {边框:1px纯红色；填充:10px；最大宽度:700px；宽度:100%；box-sizing: 边框框；}预{溢出:自动；背景:#f2f2f2；边框:1px 实心 #ccc；边框半径:4px；填充:20px；}<div class='Container'><div class='Content'><h1>你好</h1><p>Cras ac mauris purus.Phasellus at ligula condimentum, pretium nisi eget, aliquet enim.sed at massa velit.Cras ac mi dolor.Nullam id felis 坐在 amet neque tempus sodales.在 ultricies et turpis in faucibus.Morbi fringilla metus pellentesque, varius enim a, dapibus ex.Sed aliquet urna nisi，欧盟发酵剂 diam pretium quis.Curabitur vel cursus turpis.Sed a varius leo, in viverra arcu.Donec porttitor, dolor vel laoreet iaculis, magna arcu tempus ex, at porttitortellus nunc ultricies felis.Quisque congue sapien in quam tempor, non dapibus felis dignissim.Pellentesque ex eros, dignissim eget totortor non, aliquet ullamcorper nisi.Sed interdum non eros quis fringilla.Morbi condimentumtellus at blandit dignissim.Aenean metus elit、interdum et suscipit quis、ullamcorper sat amet risus.</p><pre>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Suspendisse sapien magna、lacinia sat amet quam sed、dignissim tincidunt neque.Duis sed sapien hendrerit，consectetur neque quis，tempor nisl.Pellentesque 居民 morbi tristique senectus et netus etmalesuada Fames ac turpis egestas.Praesent fringilla enim odio，坐在 amet venenatis ex commodo in.Pellentesque in enim 在 libero vulputate 发酵.Suspendisse elementum felis neque, in rhoncus diam hendrerit eget.Cras tempor porta bibendum.Fusce egettellus a enim euismod lobortis in vitae nibh.Duis ornare turpis non ex consectetur，坐 ametmalesuada elit feugiat.</pre>Here's a simple flex based blog layout:<div class='Page'> <div class='Container'> <div class='Content'> <h1>Hello</h1> <p>Cras ac mauris purus. Phasellus at ligula condimentum, pretium nisi eget, aliquet enim. Sed at massa velit. Cras ac mi dolor. Nullam id felis sit amet neque tempus sodales. In ultricies et turpis in faucibus. Morbi fringilla metus pellentesque, varius enim a, dapibus ex. Sed aliquet urna nisi, eu fermentum diam pretium quis. Curabitur vel cursus turpis. Sed a varius leo, in viverra arcu. Donec porttitor, dolor vel laoreet iaculis, magna arcu tempus ex, at porttitor tellus nunc ultricies felis. Quisque congue sapien in quam tempor, non dapibus felis dignissim. Pellentesque ex eros, dignissim eget tortor non, aliquet ullamcorper nisi. Sed interdum non eros quis fringilla. Morbi condimentum tellus at blandit dignissim. Aenean metus elit, interdum et suscipit quis, ullamcorper sit amet risus.</p> <pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sapien magna, lacinia sit amet quam sed, dignissim tincidunt neque. Duis sed sapien hendrerit, consectetur neque quis, tempor nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent fringilla enim odio, sit amet venenatis ex commodo in. Pellentesque in enim in libero vulputate fermentum. Suspendisse elementum felis neque, in rhoncus diam hendrerit eget. Cras tempor porta bibendum. Fusce eget tellus a enim euismod lobortis in vitae nibh. Duis ornare turpis non ex consectetur, sit amet malesuada elit feugiat.</pre> </div> </div></div>With this CSS.Page { border: 1px solid blue;}.Container { display: flex; flex-direction: column; align-items: center;}.Content { border: 1px solid red; padding: 10px; max-width: 700px; min-width: 0;}pre { overflow: auto; background: #f2f2f2; border: 1px solid #ccc; border-radius: 4px; padding: 20px;}Working example: https://codepen.io/anon/pen/xdeyrYWhen the browser width is >700px, the red Container is centered and the pre code block has an overflow scrollbar. But as soon as you resize the browser < 700px, the pre code block stretches the container to the full 700px and the content gets cut off.Why is the width of the container not limited by the browser/screen width in this case?If you remove align-items: center; everything works as expected. If you set white-space: normal on pre, it also works as expected. But neither of those is an option.The only workaround I came up with is to add this media query:@media only screen and (max-width: 700px) { .Container { align-items: initial; }}This does the trick, but seems a bit like a hack. Is this some flexbox bug/edge case, or am I missing some min-width: 0 trick here? It seems like using flex + align-items:center + max-width + pre just doesn't work well together.. 解决方案 In addition to Michael_B's answer, if you need the flex column direction for i.e. multiple .Content elements, you can also simply set width: 100% on the .Content.To adjust the width to your padding/border you can either use box-sizing: border-box;, which I did, or CSS Calc (width: calc(100% - 22px);)Also, for the reason Michael gave, I removed the min-width: 0 as it has no effectUpdated codepenStack snippet.Page { border: 1px solid blue;}.Container { display: flex; flex-direction: column; align-items: center;}.Content { border: 1px solid red; padding: 10px; max-width: 700px; width: 100%; box-sizing: border-box;}pre { overflow: auto; background: #f2f2f2; border: 1px solid #ccc; border-radius: 4px; padding: 20px;}<div class='Page'> <div class='Container'> <div class='Content'> <h1>Hello</h1> <p>Cras ac mauris purus. Phasellus at ligula condimentum, pretium nisi eget, aliquet enim. Sed at massa velit. Cras ac mi dolor. Nullam id felis sit amet neque tempus sodales. In ultricies et turpis in faucibus. Morbi fringilla metus pellentesque, varius enim a, dapibus ex. Sed aliquet urna nisi, eu fermentum diam pretium quis. Curabitur vel cursus turpis. Sed a varius leo, in viverra arcu. Donec porttitor, dolor vel laoreet iaculis, magna arcu tempus ex, at porttitor tellus nunc ultricies felis. Quisque congue sapien in quam tempor, non dapibus felis dignissim. Pellentesque ex eros, dignissim eget tortor non, aliquet ullamcorper nisi. Sed interdum non eros quis fringilla. Morbi condimentum tellus at blandit dignissim. Aenean metus elit, interdum et suscipit quis, ullamcorper sit amet risus.</p> <pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sapien magna, lacinia sit amet quam sed, dignissim tincidunt neque. Duis sed sapien hendrerit, consectetur neque quis, tempor nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent fringilla enim odio, sit amet venenatis ex commodo in. Pellentesque in enim in libero vulputate fermentum. Suspendisse elementum felis neque, in rhoncus diam hendrerit eget. Cras tempor porta bibendum. Fusce eget tellus a enim euismod lobortis in vitae nibh. Duis ornare turpis non ex consectetur, sit amet malesuada elit feugiat.</pre> </div> </div></div> 这篇关于前代码块在居中的 flex 容器中将内容拉伸到屏幕宽度之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！