Как растянуть блок по ширине?

.div { 
    position: absolute; 
    left: 255px; 
    right: 0; 
    height: 300px; 
    background: #777; 
}

<div class="div"></div

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  background: #242424; 
} 
 
div[conteiner] { 
  /*без   position: relative; у родителя*/ 
  position: relative; 
  left: 10px; 
  top: 10px; 
  width: 90%; 
  height: 90%; 
  background: grey; 
} 
 
div[content] { 
  /* и без position: absolute; у контента*/ 
  /* 
правила  
left 
right 
top  
bottom 
не будут работать 
*/ 
  position: absolute; 
  width: 150px; 
  height: 30px; 
} 
 
div[content]:nth-child(1) { 
  background: red; 
  right: 0; 
  top: 1px; 
} 
 
div[content]:nth-child(2) { 
  background: green; 
  top: 32px; 
  right: 0; 
  /*надо или right или left*/ 
  left: 0; 
} 
 
div[content]:nth-child(3) { 
  background: orange; 
  top: 63px; 
  left: 0; 
  right: 0; 
  /* left имеет приоритет */ 
} 
 
div[content]:nth-child(4) { 
  background: yellow; 
  top: 100px; 
  left: 0; 
  right: 0; 
  /* top тоже имеет приоритет */ 
  bottom: 0; 
} 
 
div[content]:nth-child(5) { 
  background: blue; 
  right: 0; 
  bottom: 0; 
} 
 
div[content]:nth-child(6) { 
  background: cyan; 
  top: 33px; 
  left: 255px; 
  width: calc(100% - 255px); 
  /*расположить его по леволу краю и растянуть, надо задать width*/ 
}

<!----> 
<!--Допустим есть некий контейнер--> 
<div conteiner> 
  <!-- и его контент--> 
  <div content></div> 
  <div content></div> 
  <div content></div> 
  <div content></div> 
  <div content></div> 
  <div content>меня надо растянуть от 255px от левого края</div> 
</div>