Set width to fixed div with a calc() container

Question

I have three divs: container, parent and header. The header in a fixed position should take the width from the container, it work perfectly if the container has a fixed width but if I use calc() nothing happens.

I created an example here https://jsfiddle.net/d34k53w1/5/

body {
  background: #ecf4f7;
}
.container {
  background: #fff;
  width: calc(100% - 280px);
  margin: 15px auto;
}
.parent {
  width: inherit;
  border-bottom: 2px solid #f2f2f2;
}
.header {
  width: inherit;
  height: 30px;
  position: fixed;
  background: #69abe3;
}
.content {
  padding: 20px;
}

<div class="container">
  <div class="parent">
    <div class="header">
      Lorem Ipsum
    </div>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
  </div>
</div>

PS: I can not use javascript.

Answer 1

Try to reset the default margin on body tag:

body {
  margin: 0;
}

body {
  background: #ecf4f7;
  margin: 0;
}
.container {
  background: #fff;
  width: calc(100% - 280px);
  margin: 15px auto;
}
.parent {
  width: inherit;
  border-bottom: 2px solid #f2f2f2;
}
.header {
  width: inherit;
  height: 30px;
  position: fixed;
  background: #69abe3;
}
.content {
  padding: 20px;
}

<div class="container">
  <div class="parent">
    <div class="header">
      Lorem Ipsum
    </div>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
  </div>
</div>