预编码块在居中的柔性容器中将内容拉伸超出屏幕宽度 [英] Pre code blocks stretch the content beyond screen width in a centered flex container

问题描述

下面是一个简单的基于flex的博客布局：

 < div class ='Page'> 
< div class ='Container'> 
< div class ='Content'> 
< h1> Hello< / h1> 
< p> Cras ac mauris purus。 Phase con，pre n is al al al al al al al al al al al al al。 Sed at massa velit。 Cras ac mi dolor。 Nullam id felis坐在amet neque tempus sodales上。在faucibus ultricies和turpis。 Morbi fringilla metus pellentesque，varius enim a，dapibus ex。 Sed sequet urna nisi，eu fermentum diam pretium quis。 Curabitur vel cursus turpis。在viverra arcu，Sed一个多变的利奥。 Donec porttitor，dolor vel laoreet iaculis，magna arcu tempus ex，在porttitor tellus nunc ultricies felis。 Quisque在quam tempor中嘲笑sapien，非dapibus felis dignissim。 Pellentesque ex eros，dignissim eget tortor non，aliquet ullamcorper nisi。 Sed interdum non eros quis fringilla。 Morbi在blandit dignissim的调味品tellus。爱因斯坦精英，interdum et suscipit quis，ullamcorper sit amet risus。< / p> 
< pre> Lorem ipsum dolor坐在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栖息地morbi tristique senectus et netus et malesuada fames ac turpis egestas。 Praesent fringilla enim odio，坐在amet venenatis ex commodo in。Pellentesque in enim in libero vulputate fermentum。在rhoncus diam hendrerit eget中，悬念元素felis neque。 Cras tempor porta bibendum。 Fusce eget tellus 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纯蓝色; 
} 
 
 .Container {
 display：flex; 
 flex-direction：column; 
 align-items：center; 
} 
 
。内容{
 border：1px纯红色; 
 padding：10px; 
 max-width：700px; 
 min-width：0; 
} 
 
 pre {
 overflow：auto; 
背景：＃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屏幕和（max-width：700px）{
 .Container {
 align-items：initial; 
 
 
 $ / code $ / pre 
 
 
这个技巧，但看起来有点像黑客攻击。这是一些弹性盒错误/边缘的情况下，或者我错过了一些 min-width：0 这里的诡计？看起来像使用 flex + align-items：center + max-width + pre 只是不能很好地协同工作。
解决方案
除了 Michael_B 的回答，如果您需要为多个 .Content 元素折叠列方向，您还可以简单地在<$ c>上设置 width：100％ 
 $ b 为了调整填充/边框的宽度，可以使用 box-sizing ：border-box; ，我做过，或CSS Calc（ width：calc（100％ -  22px）; ）
 
 
 
 另外，由于Michael的原因，我删除了 min-width：0 ，因为它没有效果 
 
 
 
 更新后的codepen   p> 
 
 
堆栈片段
 
 
 
 
 
     flex-direction：列; align-items：center;}。Content {border：1px solid red;填充：10px; max-width：700px;宽度：100％; box-sizing：border-box;} pre {overflow：auto;背景：＃f2f2f2; border：1px solid #ccc; border-radius：4px; padding：20px;}  
 
 < div class ='Page > < div class ='Container'> < div class ='Content'> < H1>你好< / H1> < p> Cras ac mauris purus。 Phase con，pre n is al al al al al al al al al al al al al。 Sed at massa velit。 Cras ac mi dolor。 Nullam id felis坐在amet neque tempus sodales上。在faucibus ultricies和turpis。 Morbi fringilla metus pellentesque，varius enim a，dapibus ex。 Sed sequet urna nisi，eu fermentum diam pretium quis。 Curabitur vel cursus turpis。在viverra arcu，Sed一个多变的利奥。 Donec porttitor，dolor vel laoreet iaculis，magna arcu tempus ex，在porttitor tellus nunc ultricies felis。 Quisque在quam tempor中嘲笑sapien，非dapibus felis dignissim。 Pellentesque ex eros，dignissim eget tortor non，aliquet ullamcorper nisi。 Sed interdum non eros quis fringilla。 Morbi在blandit dignissim的调味品tellus。爱因斯坦精英，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栖息地morbi tristique senectus et netus et malesuada fames ac turpis egestas。 Praesent fringilla enim odio，坐在amet venenatis ex commodo in。Pellentesque in enim in libero vulputate fermentum。在rhoncus diam hendrerit eget中，悬念元素felis neque。 Cras tempor porta bibendum。 Fusce eget tellus enim euismod lobortis in vitae nibh。 Duis ornare turpis non ex consectetur，sit amet malesuada elit feugiat。< / pre> < / DIV> < / div>< / div>  

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/xdeyrY

When 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 effect

Updated codepen

Stack 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>

这篇关于预编码块在居中的柔性容器中将内容拉伸超出屏幕宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！