Wobbles Wobbles - 6 months ago 16
HTML Question

Is a CSS only container wrapper possible?

My goal is to create a content wrapper with each item being of equal height/width. That alone is easy enough and demonstrated below, but I would like the items (DIV's)to wrap to another line if they shrink below the

min-width
so it does not look compressed on mobile displays.

I imagine jQuery could handle this, but for simplicity and size I would like to see if there is a css only solution.



#wrapper {
display: table;
table-layout: fixed;

width:90%;
height:100px;
background-color:Gray;
}
#wrapper div {
display: table-cell;
height:100px;
min-width:200px;
}

#one {
background-color:green
}
#two {
background-color:blue
}
#three {
background-color:red
}

<div id="wrapper">
<div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
<div id="two">two two two two two two</div>
<div id="three">three</div>
</div>





Some details as to the implementation:

This is for a icon grid type landing page, the number of items present are dynamic as is the dimensions of the page. Vertical scrolling due to items wrapping is fine but I do not wish to have any horizontal scrolling.

Answer

You can do this with Flexbox and flex-wrap: wrap, here is Fiddle

#wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  height: 100px;
  background-color: Gray;
}
#wrapper div {
  flex: 1;
  height: 100px;
  min-width: 200px;
}
#one {
  background-color: green
}
#two {
  background-color: blue
}
#three {
  background-color: red
}
<div id="wrapper">
  <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
  <div id="two">two two two two two two</div>
  <div id="three">three</div>
</div>