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

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;}

Related

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;
}

Flexbox wrap issue - Aligning two scrollable divs next to each other in a container of height 100vh

I want the following flex box layout to:
Have individual scrolling for the Sidebar and the Content area when the content in them overflows
Content area to appear next to the sidebar
Height of the main container to remain 100vh and neither the sidebar or the content area should exceed this.
The alert is for alerting users about issues. It should be on top and should occupy 100% of the width.
The user can choose to use the sidebar. If the sidebar is not used, content occupies 100% width. The alert will also only appear when something is wrong. If not then alert will not be shown
I am not sure why the content area appears below the sidebar and the sidebar and the content areas don't activate scrolling even after they overflow. You can see that the height of the sidebar exceeds the height of the main container (the background color of the main area is cyan).
.main {
display: flex;
flex-wrap: wrap;
height: 100vh;
background: cyan;
}
.main .alert {
flex: 1 1 100%;
background: yellow;
height: 30px;
order: -2;
}
.main .content {
flex: 1 1 auto;
background: blue;
overflow-y: auto;
}
.main .sidebar {
flex: 0 0 auto;
width: 200px;
background: red;
overflow-y: auto;
order: -1;
}
<div class="main">
<div class="alert">
Hello
</div>
<div class="content">
Content.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto.
</div>
<div class="sidebar">
Sidebar
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quis provident quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam, officiis accusamus dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
</div>
</div>

Method #1: flex-direction:column and nested flex container
body {
margin: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
background: cyan;
}
.main .alert {
flex: 1 1 30px;
background: yellow;
}
.inner-flex-container {
display: flex;
}
.inner-flex-container .content {
flex: 1 1 auto;
background: blue;
overflow-y: auto;
}
.inner-flex-container .sidebar {
flex: 0 0 200px;
background: red;
overflow-y: auto;
order: -1;
}
<div class="main">
<div class="alert">
Hello
</div>
<div class="inner-flex-container">
<div class="content">
Content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam
magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus
voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos
obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse,
minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit,
tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis
magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure,
hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum
</div>
<div class="sidebar">
Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt
corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi
ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem
dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati
optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima
assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fuga quis provident quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam,
officiis accusamus dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
</div>
</div><!-- close .inner-flex-container -->
</div>
jsFiddle
Notes:
Added body { margin: 0; } to prevent overflow and vertical scrollbar when .main has height: 100vh.
Switched flex-direction of .main to column to establish vertical stacking.
Wrapped second and third flex items (.content and .sidebar, respectively) in their own flex container, which has flex-direction row so items are stacked horizontally below the first flex item (.alert).
Method #2: flex-wrap:wrap and calc()
body {
margin: 0;
}
.main {
display: flex;
flex-wrap: wrap;
max-height: 100vh;
background: cyan;
}
.alert {
flex: 1 1 100%;
background: yellow;
height: 30px;
}
.content {
flex-basis: 50%;
background: blue;
overflow-y: auto;
height: calc(100vh - 30px);
order: 1;
}
.sidebar {
flex-basis: 50%;
background: red;
height: calc(100vh - 30px);
overflow-y: auto;
}
<div class="main">
<div class="alert">
Hello
</div>
<div class="content">
Content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni
quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus
voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos
obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse,
minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit, tenetur
libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem
optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto.
</div>
<div class="sidebar">
Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt
corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi
ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem
dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio
pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda
eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quis provident
quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam, officiis accusamus
dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
</div>
</div>
jsFiddle
Notes:
No changes to HTML
calc used to subtract height of flex item one from height of flex items two and three, enabling them to wrap underneath in a 100vh container.

Edited to add the wrapper
.content{
flex: 1 1 auto;
background: blue;
overflow-y: auto; */
width: calc(100% - 200px); // Or use flex: 1 where you got flex: 1 1 auto;
overflow-y: auto;
}
.main .sidebar {
flex: 0 0 auto;
width: 200px;
background: red;
overflow-y: auto;
order: -1;
}
.wrapper{
display:flex;
flex-wrap:wrap;
}

Collapse divs vertically CSS

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/

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;">