How to overlap footer over main content area but not hide content

Question

I need a footer that partly overlaps the content above it. The part that overlaps takes the full width of the browser, where as the content is constrained to a max width. The site is responsive and needs to be flexible.

Since percentages work off of the width of the element, not the height, I tried adding a negative % margin on the footer and adding the same % padding to the content to give it room. This works, but only until I hit the max-width of the content. Once the max width is hit, the % overlap on the svg keeps getting wider and the content's % padding stays the same (because its width is not growing).

How can I get the footer to overlap the area above it, but give the content padding or space so it's not covered by the overlapping svg?

CodePen demo. Widths on the demo are not my actual widths, they are just for demonstration.

.constrained {
  max-width: 700px;
  margin: 0 auto;
}
.header {
  background-color: #1b5d93;
  padding: 30px;
  color: #fff;
}
.page-content {
  display: flex;
}
.main-content {
  padding: 20px 0;
  width: 70%;
  background-color: #ccc;
}
.sidebar {
  width: 30%;
  background-color: #fff;
}
.footer {
  position: relative;
}
.footer svg {
  display: block;
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
}
.footer-container {
  padding: 30px;
  background-color: #1b5d93;
  color: #fff;
}

<div class="header">
  <div class="constrained">
    <h1>Header</h1>
  </div>
</div>
<div class="main-area">
  <div class="page-content constrained">
    <div class="main-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie fermentum metus, a congue felis venenatis id. Aliquam pulvinar mauris sed ante accumsan bibendum eu eget eros. Curabitur ipsum tortor, sollicitudin at molestie vitae, consequat
        sed quam. Duis pellentesque tristique rutrum. Aenean nec lobortis lectus. Phasellus et nulla ut magna suscipit congue non id nulla. Suspendisse pellentesque eu risus a tristique. Phasellus porta id tortor a blandit. Nullam finibus dui ac mollis
        rutrum. Vivamus maximus tortor id purus consequat, vitae commodo purus feugiat. In convallis, nunc et fringilla ultricies, ipsum lorem sollicitudin lorem, non luctus eros nibh egestas ex. Integer tristique scelerisque viverra. Fusce porta lectus
        velit, sed consequat risus pretium quis. In id molestie dui.</p>
      <p>Fusce mattis, nisi ac pulvinar cursus, massa ligula sodales est, vel bibendum tellus urna sit amet lorem. Etiam nec pulvinar ante. Vestibulum consequat scelerisque vestibulum. Nam mi enim, consequat id ultrices ut, laoreet at nisi. Proin ut pharetra
        dolor. Suspendisse porttitor vel diam eu condimentum. Donec a tortor a velit suscipit porttitor. Proin sit amet laoreet urna, ac lobortis lectus. In suscipit tellus eu gravida hendrerit. Pellentesque congue tempor malesuada. Maecenas et mauris
        est. Ut sapien enim, vestibulum eget tincidunt sed, aliquet non nisl.</p>
      <p>Phasellus rhoncus varius faucibus. Fusce laoreet eros lectus, vulputate sagittis magna varius vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nec ex elit. Quisque facilisis condimentum porttitor.
        Cras dignissim, odio quis lobortis viverra, sem ipsum feugiat odio, nec elementum sem ligula a elit. Praesent suscipit est ut ante malesuada convallis. Morbi sagittis at lectus vitae condimentum. Mauris iaculis commodo odio, vitae finibus dolor
        efficitur in. Donec lectus mauris, cursus a viverra ac, placerat vitae magna. Donec nibh libero, auctor ac metus a, posuere efficitur purus. In interdum mauris vel pharetra cursus. Nam iaculis est tortor, sed elementum eros congue ut. Fusce vitae
        ipsum rhoncus, cursus ante ac, venenatis purus. Vivamus id augue vel nisl interdum faucibus ac a massa. Nunc nibh orci, tempor hendrerit rhoncus ac, lacinia in diam.</p>
    </div>
    <div class="sidebar">
      <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
  </div>
</div>
<div class="footer">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1309 60"><path d="M1309 45c-142.2 20.1-360.5 12.3-653.8-26.1C361.8-19.6 143.4 6.5 0 45v15h1309V45z" fill-rule="evenodd" clip-rule="evenodd" fill="#1b5d93"/></svg>
  <div class="footer-container">
    <div class="constrained">
      <div>Some content here</div>
    </div>
  </div>
</div>

Answer 1

Add a top offset to your footer:

.footer {
  position: relative;
  top:10px;
}

Answer 2

According to (https://stackoverflow.com/a/12034794/3684265) you can give main-content the below styles that way padding doesn't affect the width:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

or you could always put your content within another div and give that the padding:

<div class="main-content">
    <div style="padding-bottom:10%;">
        <p>Content Here</p>
    </div>
</div>

don't use inline style, I did that for illustration purposes.

Answer 3

You would need to add more gray area to your main content. Keep the css the same except add padding-bottom.

.main-content {
  padding: 20px 0;
  width: 70%;
  background-color: #ccc;
  padding-bottom:5%;
}