这是一个简单的基于flex的博客布局：
<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>
有了这个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;
}
工作示例：https://codepen.io/anon/pen/xdeyrY
当浏览器宽度> 700px时,红色Container居中,预编码块具有溢出滚动条.但只要你调整浏览器大小< 700px,预编码块将容器拉伸到完整的700px,内容被切断. 在这种情况下,为什么容器的宽度不受浏览器/屏幕宽度的限制？ 如果你删除align-items：center;一切都按预期工作.如果你在pre上设置white-space：normal,它也会按预期工作.但这些都不是一种选择. 我想出的唯一解决方法是添加此媒体查询：
@media only screen and (max-width: 700px) {
.Container {
align-items: initial;
}
}
这样做的伎俩,但似乎有点像黑客.这是一些flexBox bug / edge case,还是我错过了一些min-width：0技巧？看起来像使用flex align-items：center max-width pre只是不能很好地协同工作..
解决方法
除了
Michael_B的答案之外,如果您需要弹性列方向,即多个.Content元素,您还可以在.Content上设置宽度：100％.
要调整填充/边框的宽度,您可以使用Box-sizing：border-Box;,我做的,或者CSS Calc(width：calc(100％ – 22px);)
另外,由于Michael给出的原因,我删除了min-width：0,因为它没有效果
堆栈代码段
.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,sit amet malesuada elit feugiat.</pre>
</div>
</div>
</div>
