I have a container that I want to fit a number of children in horizontally, but I know I have more children than will often fit.
+-----------------------+
| |
| |
+-----------------------+
+----+ +----+ +----+ +----+ +----+ +----+
| | | | | | | | | | | |
| | | | | | | | | | | |
+----+ +----+ +----+ +----+ +----+ +----+
Using only CSS, how do I only display the items that can fit, and expand them to fit snugly?
Desired result:
+-----+-----+-----+-----+
| | | | |
| | | | |
+-----+-----+-----+-----+
The solution can be broken into two pieces:
overflow: hidden;
so children that wrap disappear.(Thanks to this answer for inspiring this part of the solution.)
display: flex;
so children can grow.flex-wrap: wrap;
so children that won't fit can still wrap and disappear.flex: 1 0 [desired minimum width];
so children can only grow, not shrink.ul {
border: 1px solid red;
width: 350px;
height: 100px;
overflow: hidden;
padding: 0;
display: flex;
flex-wrap: wrap;
}
ul > li {
border: 1px solid blue;
display: block;
flex: 1 0 100px;
height: 100px;
box-sizing: border-box;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
@NathanArthur's solution is great for cases where you have a fixed height, however in the case you don't know your height things get a bit more hairy.
To do this without a fixed height you can use display: grid
. Browser support for css grid currently is pretty limited to latest versions, but I believe this would be one of few (if not the only) way to do with without a fixed height.
But what you can do is set up a display: grid
with auto-fit
columns using the repeat()
function combined with the minmax()
function. This will give you columns with a minimum size set by you, which will fill the rest of the space needed. Combine this with grid-auto-rows: 0px
which will hide any additional rows added by child auto placement which happens if they start to go outside the bounds of the defined grid-template
parameters. Looks a little something like this, note no defined heights and variable widths:
ul {
border: 1px solid red;
width: 350px;
overflow: hidden;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: 1fr;
grid-auto-columns: 0px;
grid-auto-rows: 0px;
}
ul.test2{
width: 520px;
}
ul > li {
border: 1px solid blue;
box-sizing: border-box;
}
<ul>
<li>Item 1</li>
<li>Item 2<br><br><br> with some extra height</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
<ul class="test2">
<li>Item 1</li>
<li>Item 2<br><br><br> with some extra height</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With