Shrink parent element to eliminate gaps left after wrapping line-level children

Question

I have a centered box containing a number of elements to be displayed side-by-side, possibly wrapping onto several lines. On resize, I'd like the box to shrink. The elements should remain the same size, wrapping onto additional lines as necessary.

I can think of a few ways of handling this (e.g., setting children to display: inline-block or float: left, or setting parent to display: flex; flex-flow: row wrap;).

In every scenario, resizing causes the elements to wrap. However, this leaves a gap between the last element on the line and the edge of the parent. This behavior is entirely reasonable in most contexts, but here it pulls the elements visually out-of-center.

I'd love it if I could apply some CSS magic to have the parent box "shrink" to the width actually occupied by child elements, ignoring end-of-line space. I was hoping display: table would come to my rescue here, but no such luck.

I recognize that a workaround would be to use a flex box, specifying justify-content: space-between (or without a flex box, just text-align: justify). This would eliminate the gap by distributing unused space between the elements - but I don't really want to have spaces between the items.

Here are some images depicting the issue: before resize / after resize

See below for snippet (I believe you'll need to run it full-page to have it respond to resize).

body {
  padding: 50px;
  background: pink;
}

.outer {
  display: flex;
  flex-flow: row wrap;
  max-width: 600px;
  margin: 0 auto;
  padding: 10px;
  background: yellow;
}

.item {
  width: 100px;
  height: 100px;
}

.a {
  background: green;
}

.b {
  background: blue;
}

<body>
  <div class="outer">
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item a"></div>
    <div class="item b"></div>
  </div>
</body>

possible duplicate: [Make container shrink-to-fit child elements as they wrap](http://stackoverflow.com/q/37406353/3597276) — Michael Benjamin, Feb 13 '17 at 19:13
possible duplicate: [How to center a flex container but left-align flex items](http://stackoverflow.com/q/32802202/3597276) — Michael Benjamin, Feb 13 '17 at 19:14
Thank you @Michael_B, I will check these out. Not sure how I didn't find these earlier! — jptacek, Feb 13 '17 at 19:31

score 0 · Answer 1 · edited May 23 '17 at 11:45

I did a bit more research, using Michael_D's comments as a starting point.

Concluding that it's difficult to get a container to shrink this way using pure CSS.

From another post:

The browser renders the container on the initial cascade. It doesn't reflow the document when a child wraps.

When the container contents have a single known width, perhaps the most straightforward workaround would be to use media queries to set the container width. Breakpoints would occur at multiples of the base content width up to the maximum number of columns. This described and demonstrated here.

Shrink parent element to eliminate gaps left after wrapping line-level children

1 Answers1