<!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: 0 calc("+(scrollWidth/2)+"px - 50vw) 0 calc(100% + "+(scrollWidth/2)+"px - 50vw);}";
var style = document.createElement('style');
style.textContent = x;
document.querySelector("head").appendChild(style);
});
</script>
</body>
</html>