前代码块在居中的 flex 容器中将内容拉伸到屏幕宽度之外 [英] Pre code blocks stretch the content beyond screen width in a centered flex container

问题描述

这是一个简单的基于 flex 的博客布局:

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

使用这个 CSS

.Page {边框:1px纯蓝色；}.容器 {显示:弹性；弹性方向:列；对齐项目:居中；}.内容 {边框:1px纯红色；填充:10px；最大宽度:700px；最小宽度:0；}预{溢出:自动；背景:#f2f2f2；边框:1px 实心 #ccc；边框半径:4px；填充: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) {.容器 {对齐项目:初始；}}

这可以解决问题，但似乎有点像黑客.这是一些 flexbox 错误/边缘情况，还是我在这里错过了一些 min-width: 0 技巧?似乎使用 flex + align-items:center + max-width + pre 并不能很好地协同工作..

解决方案

除了 Michael_B 的回答，如果您需要多个 .Content 元素的 flex 列方向，您也可以简单地在 .Content 上设置 width: 100%.

要调整填充/边框的宽度，您可以使用 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/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>

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