Make Container Shrink-To-Fit Child Elements as They Wrap

Make container shrink-to-fit child elements as they wrap

In CSS, the parent container doesn't know when its children wrap. Hence, it continues scaling its size oblivious to what's going on inside.

Put another way, the browser renders the container on the initial cascade. It doesn't reflow the document when a child wraps.

That's why the container doesn't shrink-wrap the narrower layout. It just continues on as if nothing wrapped, as evidenced by the reserved space on the right.

The maximum length of the horizontal white space is the length of the element(s) that the container was expecting to be there.

In the following demo, whitespace can be seen coming and going as the window is re-sized horizontally: DEMO

You'll need a JavaScript solution (see here and here)... or CSS media queries (see here).

When dealing with wrapping text, text-align: right on the container may be helpful in some cases.

Shrink flexbox to the size of its children

Since the width is always the same, CSS grid can help you here:

.page {
background-color: pink;
display: grid;
grid-template-columns:repeat(auto-fit,200px); /* same width as child */
gap:10px; /* the same gap here */
justify-content:center; /* center everything */
}

.flex-column {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: green;
grid-column:1/-1; /* take all the columns */
gap: 10px;
}

.flex-child {
width: 200px;
height: 100px;
background-color: blue;
}

.button {
padding: 20px;
background-color: red;
grid-column:1/-1; /* take all the columns */
margin:auto; /* center the button */
}
<div class='page'>
<div class="flex-column">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</div>
<div class="button">Load more</div>
</div>

Justify-content: center breaks if child's content is wrapped onto more than 1 row with flex-wrap: wrap

You can only achieve this if you set a fixed width to the container that holds the flexbox-items. You can make it a bit simpler and use calc(...) function in CSS here. If you know how many items should be in one row, you can just change the number for multiple breakpoints easily. Even easier if you set the width of one item as a css custom property.

#container {
width: 500px;
display: flex;
justify-content: center;
background-color: #c0faff;
}

#parent {
display: flex;
flex-wrap: wrap;
width: calc(4* 110px)
}

.child {
background-color: #5bb4bb;
width: 100px;
height: 100px;
margin: 5px;
}
<div id="container">
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>

Shrink container to smaller child rather than expanding to fill parent

To get the container not to take up the entire parent, you need to tell it where it should be placed within the parent - by default, it doesn't know where to go so it fills the parent =D.

The simplest ways of doing this are to use an Align or a Center widget. I believe you want to put it around your Container in this case, but I'm not 100% sure.

I am using flexbox , and the child elements won't shrink to fit

There are a couple reasons why your items aren't fitting:

  1. Flex children don't just shrink because you have more than one item. They will take up the space they need.
  2. Your images aren't set to have any specific width, so they will be as wide as their natural size.

I updated your CSS with a class for statue to make it more efficient - since all those elements shared properties.

.ArkStatues {  display: flex;  border-radius: 5px;  border: 10px solid black;  flex-direction: row;  justify-content: center;  align-items: center;  flex-wrap: nowrap;}
.statue { border-radius: 5px; border: 1px solid lightyellow; flex: 0 0 33.333%; box-sizing: border-box;}
.statue img { width: 100%; height: auto; display: block;}
<div class="ArkStatues">  <div id="statue1" class="statue">    <img src="https://upload.wikimedia.org/wikipedia/commons/5/55/San_Domenico22.jpg" alt="St. Petronius" />  </div>  <div id="statue2" class="statue">    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6c/San_Domenico34.jpg" alt="St. Proclus" />  </div>  <div id="statue3" class="statue">    <img src="https://upload.wikimedia.org/wikipedia/commons/9/94/Angel_by_Michelangelo_-_1.JPG    " alt="Marble Angel" />  </div></div>


Related Topics



Leave a reply



Submit