Collapse divs vertically CSS - html

I'm working on a website and I've this code
.container {
width: 100%;
margin:0 auto;
}
.container div {
width: 25%;
display: inline-block;
vertical-align:top;
background: lightblue;
border: 1px solid black
}
<div class="container">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nisi, sit eius provident, vitae, quisquam impedit dolore ad aperiam incidunt optio consequuntur aliquam facilis hic ullam! Quisquam tempora, fuga numquam.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quod, ipsa quidem natus quis quam odit molestiae sit, debitis amet expedita fugiat nesciunt at modi eos, porro laborum quas optio.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, necessitatibus alias atque nulla praesentium dolorem, dignissimos autem culpa placeat quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora labore optio placeat aperiam facilis recusandae velit, minus modi quo dolores molestias in ratione officia accusantium, reiciendis porro, ipsam, repellendus atque!</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quisquam ratione ducimus temporibus rerum, voluptatum facilis repellat quos nostrum commodi adipisci hic libero, rem optio consequatur tempora sed sequi voluptas!</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolor nobis veritatis deserunt voluptate illum, voluptatibus consequuntur optio autem sint, accusamus ipsam, quidem nesciunt doloribus similique doloremque magni dolorem. Animi.</p>
</div>
</div>
I want my divs collapse vertically like this image :
I try to add a float: left; but it does not work.
Thanks for your help !


Add flex properties to your .container class.
.container {
width: 100%;
margin:0 auto;
display:flex;
flex-wrap:wrap;
}


It is not that easy to achieve with few lines of html + css when you don't want to use flexbox.
I suspect you should give a try this plugin:
http://masonry.desandro.com/

Related

Order uneven sized elements in CSS [duplicate]

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 1 year ago.
I am trying to make a layout where the uneven sized elements will be "1 - 2 / 3 - 4" on desktop, and stacked one under the other on the mobile. I've tried to do that with floats, and I'm partially there. However, the gap between the elements 2 and 4 is too large... Is there a way to reduce this somehow, maybe with the other approach perhaps?
Please check the full-page preview, thanks a lot for any input!
.test1 {
background: red;
}
.test2 {
background: yellow;
}
.test3 {
background: lightblue;
}
.test4 {
background: green;
}
section {
}
section:nth-child(odd) {
float: left;
width: 66%;
}
section:nth-child(even) {
float: right;
width: 33%;
}
footer {
clear: both;
}
#media(max-width: 992px) {
section:nth-child(odd) {
float: none;
width: 100%;
}
section:nth-child(even) {
float: none;
width: 100%;
}
}
<div class="wrap">
<section class="test1">
<b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
</section>
<section class="test2">
<b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test3">
<b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test4">
<b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
<footer>
footer
</footer>

If you can use grid and change the starting order of your html elements, you can make them stack how you want on desktop, and then use a media query to change to flex and have them 100% width and ordered correctly for mobile
.test1 {
background: red;
}
.test2 {
background: yellow;
}
.test3 {
background: lightblue;
}
.test4 {
background: green;
}
.wrap {
display: grid;
grid-template-columns: 66% 33%;
column-gap: 1%;
}
#media(max-width: 992px) {
.wrap {
display: flex;
flex-wrap: wrap;
}
.column {
display: contents;
}
section {
width: 100%;
}
.test1 {
order: 1;
}
.test2 {
order: 2;
}
.test3 {
order: 3;
}
.test4 {
order: 4;
}
}
*/
<div class="wrap">
<div class="column">
<section class="test1">
<b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum
dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
</section>
<section class="test3">
<b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
<div class="column">
<section class="test2">
<b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test4">
<b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
</div>
<footer>
footer
</footer>
I guess you don't need grid and can just use flex:
.test1 {
background: red;
}
.test2 {
background: yellow;
}
.test3 {
background: lightblue;
}
.test4 {
background: green;
}
.wrap {
display: flex;
justify-content: space-between;
}
.column:first-child {
width: 66%;
}
.column:last-child {
width: 33%;
}
#media(max-width: 992px) {
.wrap {
flex-wrap: wrap;
}
.column {
display: contents;
width: 100%;
}
section {
width: 100%;
}
.test1 {
order: 1;
}
.test2 {
order: 2;
}
.test3 {
order: 3;
}
.test4 {
order: 4;
}
}
*/
<div class="wrap">
<div class="column">
<section class="test1">
<b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum
dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
</section>
<section class="test3">
<b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
<div class="column">
<section class="test2">
<b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test4">
<b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>
</div>
<footer>
footer
</footer>

You could work only on a media query min-width: 992px.
On your .wrap element, add display: flex and flex-wrap: wrap. flex-wrap will allow your children to go to the next line.
.wrap {
display: flex;
flex-wrap: wrap;
}
Then, define the width of your children.
section:nth-child(odd) {
width: 66%;
}
section:nth-child(even) {
width: 34%;
}
#media(min-width: 992px) {
.wrap {
display: flex;
flex-wrap: wrap;
}
section:nth-child(odd) {
width: 66%;
}
section:nth-child(even) {
width: 34%;
}
}
/* For demo only */
.test1 {
background: red;
}
.test2 {
background: yellow;
}
.test3 {
background: lightblue;
}
.test4 {
background: green;
}
<div class="wrap">
<section class="test1">
<b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
</section>
<section class="test2">
<b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test3">
<b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
<section class="test4">
<b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
</section>
</div>

complex flexbox layout with scrollable containers [duplicate]

This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 6 years ago.
I have a complex flexbox based layout for my web-app which has several fixed and scrollable containers.
This ist how it should look like:
The whole layout is 100% height and width and expands automatically.
The green divs should have 50% height of their parent container.
The orange colored divs should be scrollable and expand to full possible height.
the blue divs have a fixed height.
Here is the basic structure as code:
Show on codepen
html,
body {
height: 100%;
position: relative;
box-sizing: border-box;
display: flex;
flex: 1;
margin: 0;
}
* {
box-sizing: border-box;
}
div {
border: 1px solid black;
text-align: center;
margin: 5px;
padding: 5px;
}
.flex {
flex: 1;
}
.max-50 {
max-height: 50%;
background-color: green;
}
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.scrollable {
overflow: auto;
background-color: orange;
}
.fixed {
height: 30px;
background-color: blue;
color: white;
}
.sidebar {
flex-basis: 250px;
}
#header {
height: 40px;
}
<div class="column flex">
<div class="fixed"> fixed </div>
<div class="row flex">
<div class="sidebar left scrollable">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptatibus debitis vitae eveniet, cum expedita animi dolor odit natus vero minima esse modi impedit atque nostrum dolorum consequatur id error?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam laboriosam mollitia, corporis nihil quaerat aperiam, tempore recusandae! Quis dolorem quibusdam, dolores, repudiandae, numquam voluptatem enim commodi eligendi sequi adipisci voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, magnam provident ea ullam temporibus laudantium non voluptates officia eos praesentium ipsam quis laboriosam? Aperiam veniam obcaecati rem at id minus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, corporis, nulla. Possimus, non maxime animi, veritatis necessitatibus ullam sed velit molestias voluptatem rem aperiam vero itaque voluptas ab fuga eum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, aliquid, possimus neque at maxime pariatur quidem repellat nulla tempora nam reiciendis enim? Fugiat aspernatur incidunt voluptatum, in dolorum asperiores numquam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae nam minima consequatur distinctio nemo eaque dolorum ad, accusamus, nulla, odio hic debitis tempora, culpa non? Molestiae esse et perspiciatis officia?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus minus necessitatibus, voluptas numquam quo natus, quas. Quod ad, fuga deleniti vero, reprehenderit odit harum, laboriosam quo maxime possimus, doloremque eligendi!
</p>
</div>
<div class="column flex">
<div class="fixed"> fixed </div>
<div class="row flex">
<div class="column flex scrollable">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
</p>
</div>
<div class="sidebar right column">
<div class="flex max-50">
<div class="scrollable flex">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, nobis perspiciatis saepe deleniti optio repellat culpa minima ad odio, eos assumenda? Fuga debitis non tempore voluptatum quisquam, repellat, praesentium quaerat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum distinctio aspernatur pariatur similique porro, quibusdam eius quis ipsum error cum itaque fugit quam repellat adipisci ratione aut iusto inventore?
</p>
</div>
</div>
<div class="flex max-50">
<div class="fixed"> fixed </div>
<div class="scrollable flex">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati culpa suscipit, unde tempora veniam repudiandae magni. Distinctio, totam eius sapiente tempore delectus adipisci quis, vel, maiores explicabo hic tempora facilis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore consectetur quasi sequi odio, magni laboriosam inventore iure. In temporibus qui, expedita ad, labore excepturi itaque quo eius aut numquam sunt?
</div>
<div class="fixed"> fixed </div>
<div class="fixed"> fixed </div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried everthing I know about flexboxes, CSS and HTML, but I can't get it to work in all latest versions of IE, Firefox and Chrome.
Important note: I am very limited for changing the html structure, so I would be happy to found a solution with just CSS.
Anybody out there who can master this?

Try adding min-height: 0;
.flex {
flex: 1;
min-height: 0;
}
Updated pen
4.5. Implied Minimum Size of Flex Items
To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties

You need to add the following CSS rules to .max-50:
.max-50 {
display: flex;
flex-direction: column;
}
Result here

How to keep bootstrap columns of same size so that they snap correctly?

I'm building a simple site with bootstrap columns, but I would like for them to stay with the same height, since as of right now, if the last column in the row is short in height, the next one gets placed below it instead of on the next row to the left. How could I do this?
.col-xs-3 {
border: 1px solid red;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row ">
<div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
<div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
<div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
<div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio!</div>
<div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
</div>
</div>
edit: since the snippet isn't showing correctly to show my issue, here is a codepen: http://codepen.io/sgarcia-dev/pen/zqbjBg
edit2: I saw the other threads, but those show how to set them to the same height without needing columns to be responsive. I can't use flexbox for IE reasons, and I need to keep the HTML clean enough so that these columns have more than one column size (col-md-3, col-xs-6, etc). My current solution which for some reason doesn't work is doing this:
.col-sm-3:nth-child(3n):after {
content: "";
display: table;
clear: both;
}
Can someone help?

Placing <div class="clearfix"></div> should fix the issue
<div class="container">
<div class="row ">
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem</div>
<div class="clearfix"></div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
</div>
</div>

From the question and your comments on previous replies, it sounds as if you do not actually want/need equal sizes columns (which would include stuff such as backgrounds, borders extending to the same height for all, which would be rather easy to achieve with flexbox - maybe as nice-to-have in supporting browsers), at least not as the main goal; but you rather just want the "boxes" that flow onto a second (, third, ...) "row" or rather line to all have the y-position of their top edge match that of the bottom edge of the highest column in the previous row.
That is quite easy to achieve, if you forgo bootstrap's floating, and use display:inline-block on the columns instead.
Then of course you will have to eliminate the space between the columns that inline-block brings with it - but that is a well known issue with several possible fixes, see https://css-tricks.com/fighting-the-space-between-inline-block-elements/ - I chose the font-size 0 on the parent element here, but if you need to satisfy older IE you might need to use an absolute font-size for the "re-set" on the columns rather than the rem I used in the example.
.row {
font-size: 0; /* fight white space */
}
.col-md-3,
.col-sm-6 { /* add selectors for more of the col-variants if needed */
border: 1px solid red;
float: none; /* disable floating */
display: inline-block; /* make inline-block instead */
vertical-align: top; /* have top edges of elements on one line align */
font-size: 1.5rem; /* reset font-size */
}
http://codepen.io/anon/pen/ezJQLM
IMHO this solution has a nice benefit/advantage in that you don't need to alter anything regarding bootstrap's column width definitions or wrestle floats into shape using adventurously placed clearfixes.

The reason that you have 1 col getting pushed below the other is becuase you are using the class: col-xs-3 with 5 col's. Bootstrap works off the fact that you can only have an additive total of 12 per "row" on the same "row"
3 * 5 = 15, so you get 1 pushed down to it's own "row, allowing 4 to be on the same row; 3 * 4 = 12.
If you instead use the col-xs-2 class, you will have all on the same "row"; 2 * 5 = 10
Do the following to correct your problem:
.col-xs-2 {
border: 1px solid red;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row ">
<div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
<div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
<div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
<div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio!</div>
<div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
</div>
</div>
EDIT PER COMMENTS:
To push the other column to it's own row, place it in another div that has the row class.
<div class="container">
<div class="row ">
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem</div>
</div>
<div class="row">
<div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
</div>
</div>
.col-sm-3 {
border: 1px solid red;
}

Vertical Centering for multiple identical-height columns *without* flexbox [duplicate]

This question already has an answer here:
Equal height columns and vertical align image in column?
(1 answer)
Closed 6 years ago.
Although flexbox is now pretty much the standard, and most users have the ability to use it, I wanted a robust old-school, backward-compatible solution for having multiple columns that are the same height, and whose contents are also vertically centered that does not rely on flexbox. It sounds easy, but those who are familiar with old-school html know that this is anything but straightforward.

Here is the codepen I forked, with code created by gitter.im user #jdtdesigns: http://codepen.io/ihatecoding/pen/WwOyya
Here is the html he wrote:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<h1 class="text-center">Header</h1>
</header>
<section class="main">
<div class="left">
<nav>
<h3>Menu</h3>
Home
Contact
About
Support
Home
Contact
About
Support
</nav>
</div>
<div class="center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nulla quibusdam adipisci, enim libero ducimus, et? Porro ex in temporibus. Temporibus expedita aliquam, doloribus, perspiciatis in tempora soluta repellendus voluptatum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et, quasi eligendi voluptatem praesentium repellendus! Cupiditate officia culpa placeat. Molestiae nulla laborum, est magni, cupiditate qui ullam eum aliquam consequuntur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste consequuntur ea accusantium nemo amet. Sint, suscipit assumenda eos, exercitationem perferendis adipisci numquam sunt, nesciunt repellendus fugit vel ut saepe eligendi.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
</div>
<div class="right">
<div class="ad">
<h1>Ad</h1>
</div>
<div class="ad">
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
</div>
</div>
</section>
<footer>
<h1 class="text-center">Footer</h1>
</footer>
</body>
</html>
Here is the css he wrote:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.text-center {
text-align: center;
}
.main {
display: table;
width: 100%;
}
.main > * {
display: table-cell;
vertical-align: middle;
}
.left, .right {
width: 20%;
background: #4385db;
text-align: center;
padding: 40px;
}
.center {
width: 60%;
padding: 20px;
}
header, footer {
background: #9842a5;
padding: 20px;
}
nav > * {
display: block;
}
a {margin:20px;}

how to make div scrollable with 100% height and width?

i have included one table 100% and 100%.
<table border="1" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr height="100">
<td>
this is fixed height 100px
</td>
</tr>
<tr>
<td>
<div style="height: 100%;width: 100%">
remaining height for this td. and this div should be do only vertical scrolling without expanding the page size.
</div>
</td>
</tr>
</table>
first tr height is fixed height 100px
remaining height for this second tr. and this tr contains a div with 100% height and width, this div should be do only vertical scrolling without expanding the page size.

Working jsFiddle Demo
There is no need to use table. Use div instead:
<div id="head">this is fixed height 100px</div>
<div id="body">
Content
</div>
And CSS:
#head {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: yellow;
}
#body {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
background: pink;
overflow: auto;
}
Full Page Markup:
<!doctype html>
<html>
<head>
<title>My Page</title>
<style>
#head {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: yellow;
}
#body {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
background: pink;
overflow: auto;
}
</style>
</head>
<body>
<div id="head">this is fixed height 100px</div>
<div id="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
</div>
</body>
</html>

With your demo link I was able to successfully see what your issue is.
You do not have the following code in your second <div>'s style="" tag.
white-space: nowrap; overflow-x: hidden;
If you add it you should be up and running.

Trye style="height:auto; overflow-y:scroll"

Try this style="height:100%; overflow-y:scroll"

try like this <div style="height: 100%;width: 100%;overflow-y: scroll;">