Fill Viewport with Relative Child #tags: css

fill-viewport-relative-child.css

/* http://codepen.io/Mest/pen/oKBIu?editors=1100 */

* {
  box-sizing: border-box;
}

html,
body,
.parent-div {
  height: 100%;
}

.parent-div {
	background: #222226;
	max-width: 500px;
	margin: 0 auto;
	padding: 2em;
}

.child-div {
	background: #ccc;
	text-align: center;
	padding: 2em;
	border-left:  5px solid red;
	border-right: 5px solid red;
	
	width: 100vw;
	position: relative;
	left: calc(-50vw + 50%);
}