CSS quicky: fixing flexbox width with pre tags

I am pretty happy with my minimal blog layout - in the code it looks something like:

<div id="content-container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

with the css code

#content-container {
    display: flex;
}
#content {
    flex: 1;
}
#sidebar {
    max-width: 210px;
}

nothing too exciting…

While i’m writing several drafts, i had looong docker commands in pre tags, and it broke the layout - i don’t know why, but the pre tags didn’t want to break the lines. Everything was pushed out of all containers, even out of the max-width of 960 pixels on the body. Nothing seems to help, overflow, fixed width, everything was ignored.

???

to the resuce

After a lot of google and stackoverflow, i found this article:

https://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow

The solution: just add min-width: 0; to the container with flex: 1

???

#content {
    flex: 1;
    min-width: 0;
}

I prepared a codepen - uncomment the allmighty min-width to see the magic happen!

Not sure if this was intended by the specification?

#gallery {
    column-count: 4;
}

i think column-count is not the newest addition, but it is incredibly useful when working with multiple colums, and for me it was a new discovery :)

https://caniuse.com/#feat=multicolumn

Last posts

Tags

for Disqus comments please visit the permalink...