I have the following structure in my application:
-
The parent container won't grow when a child element is added.
+------ container -------+
+--- child_container ----+
| child1 child2 child3 |
| child4 |
+------------------------+
but we can avoid the rendering of new one on the next line by using css3 flex box. The sample is placed the below mentioned path
.products{
display: -webkit-flex;
-webkit-flex-flow: row;
/*-webkit-justify-content: center;*/
}
.products > div{
padding: 0 4em;
}
The result will look like this:
+--- child_container ----+|
| child1 child2 child3 ch|ild4 child5
| |
+------------------------+