css - How set full screen width background on fixed width element? -

i have simple structure of element container of dynamic height , fixed width (markup below). on 1 hand element's background should span whole window width, on other children's size must limited container (desired layout below). number of children , sizes (which equal on image simplicity) dynamic.

is possible without adding container? want avoid achieving desired element content width setting width on children, because number dynamic , size relationships become complicated write unless total width limited container's width.

here's pen experiment;

markup

<div class="container">   <div class="child">   <div class="child">   ... </div>  .container {   width: <fixed-width>px; } 

desired layout (the whitespace between children , container irrelevant)

one route can take solve using viewport width on parent container padding, force children box 500px wide (as per codepen).

the important thing remember when doing box-sizing:border-box; need set on container, otherwise padding goes ballistic.

we using calc, vw , padding.

padding: 20px calc(50vw - /*half of container width*/); 

here's full expanded code of container on linked codepen:

.container {   display: flex;   flex-flow: row nowrap;   justify-content: center;   margin-left: auto;   margin-right: auto;   height: 300px;   width: 100%;   padding: 20px calc(50vw - 250px);   background-color: #acffac;   background-size: 100vw auto;   background-position: center top;   box-sizing: border-box; }  html {   overflow-y:scroll; /* fixes potential calculation errors caused scroll bar - roberts comment */ } 

here's working version of codepen, , sake of keeping eggs in 1 basket, here's expandable code snippet:

.container {    display: flex;    flex-flow: row nowrap;    justify-content: center;    margin-left: auto;    margin-right: auto;    height: 300px;    width: 100%;    padding: 20px calc(50vw - 250px);    background-color: #acffac;    background-size: 100vw auto;    background-position: center top;    box-sizing: border-box;  }    .child {    flex: 1 0 auto;    width: 100px;    height: 100%;    background-color: #ff4444;  }    .child+.child {    margin-left: 20px;  }

<div class="container">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>  </div>

i finish off pointing out if else has better solution, may want @ time being instead there issues using vw inside calc on older versions of chrome , safari.

---

edit:

as noted in comments vadim , robert there few things can cause snags.

firstly, assuming working bare minimum template (i.e. no normalize/reset.css), body still have inherent margins mess kind of layout. can fix with:

body {     margin:0; } 

secondly, depending on os (yes i'm looking @ microsoft!) scrollbars can push content side whilst simultaneously still being included in calculation vw.

we can fix 1 of 2 way. first being adjustment on padding calculation include scrollbar side, have write script ensure scrollbar present, and scrollbars differ in sizes (i.e -> 17px, edge -> 12px).

the other alternative use custom content scroller, full overflow:hidden; on content, thereby removing scroll bar, before implementing it's own version of scrollbar (which lies on top of content position:fixed;) it.