Question

这是一个简单的基于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居中，预编码块有溢出滚动条。但只要你调整浏览器的大小＆lt; 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只是不能很好地协同工作..

Answer 1

这确实是min-width: 0问题。

它已应用于您的代码中，但设置不太正确。

min-width和min-height覆盖仅适用于主轴方向。

这意味着min-width: 0覆盖仅适用于flex-direction: row。

同样，min-height: 0修正仅适用于flex-direction: column。

您的Flex容器为flex-direction: column。您的弹性项目为min-width: 0。因此，覆盖没有效果。

将容器切换到行方向。由于您未将Flex属性应用于Flex项目的内容，因此除了允许<pre>标记缩小外，交换机不会更改任何内容。

您还需要将align-items: center切换为justify-content: center。

revised demo

此处有更多详情：Why doesn't flex item shrink past content size?

Answer 2

除Michael_B的答案外，如果您需要弹性列方向，即多个.Content元素，您还可以在{{1}上设置width: 100% }}

要调整填充/边框的宽度，您可以使用.Content，也可以使用CSS Calc（box-sizing: border-box;）

另外，由于Michael给出的原因，我删除了width: calc(100% - 22px);，因为它没有效果

Updated codepen

Stack snippet

＆＃13;

min-width: 0

＆＃13;

.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;
}

＆＃13;

预编码块将内容扩展到中心弹性容器

2 个答案: