Немного изменил генерируемый css.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
background-color: burlywood;
text-align: justify;
margin: 0 auto;
width: 200px;
padding: 0 100px 0 0;
}
.wrp {
background-color: chocolate;
height: 100%;
min-height: 100vh;
padding: 0;
}
</style>
</head>
<body>
<div class="wrapper">
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
<div class="wrp">Этот блок нужно растянуть по ширине экрана, за пределы его родителя</div>
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
</div>
<script>
window.addEventListener('DOMContentLoaded', function() {
var scrollWidth = window.innerWidth - document.documentElement.clientWidth ;
var x = '.wrp{'
+'width: calc(100vw - '+scrollWidth+'px);'
+'margin-left:calc(-.5 * (100vw - '+scrollWidth+'px) + 100%);'
+'}';
var style = document.createElement('style');
style.textContent = x;
document.querySelector("head").appendChild(style);
});
</script>
</body>
</html>
Тут можно ширину окна изменить рил тайм:
https://jsfiddle.net/j2e6pL1t/
PS. Если изменить ширину .wrapper, то работает неправильно.