When using Flexbox to create two equal columns:
To make the child of the first column stretch:
Here is a simple guide on Flexbox.
Flexbox Compatibility: Works on IE11+ and all modern browsers.
Example
Using Bootstrap: Check out this updated fiddle from your comment. The 1px left gap has been removed by using
div.flex.row:before, div.flex.row:after { display: none }
Related answer: How to remove 1px gap in Chrome when using display:flex
I have simplified unnecessary classes for this example. Currently, both columns have heights based on the tallest one. You could opt to fill the entire page height by adding height: 100vh to the flex container — learn more about viewport units here.
Viewport Units Compatibility: Viewport Units are widely supported.
To adjust a column's width, change its flex value. In this example, I set the second column to flex: 3 to make it wider.
body {
color: red;
margin: 0;
}
.flex {
display: flex;
/*To make columns span full height of page, use:
height: 100vh;*/
}
.column {
flex: 1;
}
.column:first-child {
display: flex;
}
.column:last-of-type {
background: #000;
flex: 3;
}
aside {
flex: 1;
background: #F90;
}
<div class="flex">
<!-- menu -->
<div class="column">
<aside>
Menu content
</aside>
</div>
<!-- content -->
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac elementum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus nec elementum erat. Suspendisse consequat ut metus ut cursus.
Aenean et lectus id libero venenatis varius. Vivamus luctus ligula sit amet faucibus vulputate. Vestibulum tincidunt fringilla mauris, a vulputate magna egestas nec. Vivamus a odio ut nibh viverra fermentum.</p>
<p>Nulla facilisi. Pellentesque nec libero leo. Duis porta ut neque vulputate blandit. In vel quam eu eros finibus feugiat ut in nulla. Morbi congue, tellus commodo euismod pulvinar, lacus dui fringilla lectus, in tempus mi nulla semper ex. Integer feugiat,
lectus a facilisis rutrum, ex magna tincidunt ligula, in suscipit turpis lorem quis neque. Suspendisse dictum, nulla at aliquet cursus, magna tellus mattis purus, nec volutpat mauris nunc non neque. Mauris pretium mauris sed eros interdum lobortis.
Aenean id vestibulum nisl. Praesent sit amet tempor nulla, consequat viverra ante. Maecenas eu pretium lacus, a consectetur sem. Proin viverra eget turpis eu condimentum. Donec et egestas enim. Maecenas fermentum auctor ligula, nec fringilla mi.
Quisque hendrerit purus eget urna semper sodales.</p>
</div>
</div>