html - Pre code blocks stretch the content beyond screen width in a centered flex container

Question

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

Answer 1

It is indeed a min-width: 0 problem.

It's applied in your code, but the set-up is not quite right.

The min-width and min-height overrides work only in the direction of the main axis.

This means that the min-width: 0 override works only in flex-direction: row.

Similarly, the min-height: 0 fix applies only in flex-direction: column.

Your flex container is flex-direction: column. Your flex item has min-width: 0. Therefore, the override is having no effect.

Switch your container to row-direction. Since you're not applying flex properties to the content of the flex item, the switch won't change anything, except allow your <pre> tag to shrink.

You will also need to switch align-items: center to justify-content: center.

revised demo

More details here: Why doesn't flex item shrink past content size?