I was playing around with css grid the other day and i found a nice (and easy) way to do a standard left sidebar and fluid main content area. this is rather than floating the sidebar and then setting the width of the content to auto, which is a bit messy.

css

.middle-content {
	background:#FFF;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
	padding:20px 20px;
	margin:40px auto;
	overflow:auto;
	display:grid;
	grid-gap: 10px;
	grid-template-columns: 240px auto;
	grid-template-areas: "widgets content";	
}
.widgets {
	grid-area: widgets;
}
.page-content {
	width:auto;
	background:#CCC;
	grid-area: content;
}
.box {
	background:#666;
	padding:30px;
	border-radius: 5px;
}

html

<div class='wrap middle-content'>
    <div class='widgets'>
        <div class='box'></div>
    </div>
    <div class='page-content'>
        <div class='box'></div>
    </div>
</div>

example