<!--


Forum question answer only:

https://www.sitepoint.com/community/t/doesnt-stretch-the-element-to-its-full-content/412536/12

-->

<div class="cont">
  <header class="header" id="header">
    <p>Left Column</p>
  </header>
  <main class="main" id="main">
    <nav class="nav">
      <button id="col1">Show / Hide left column</button>
      <button id="col2">Show / Hide Right column</button>
    </nav>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>
    <p>Main</p>

  </main>
  <footer class="footer" id="footer">
    <p>RightColumn</p>
  </footer>
</div>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}

p {
  margin: 0 0 1rem;
  background: #666; /* just for testing*/
}
/* dirty reset best avoided except for quick demos
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
}
*/
.cont {
  display: flex;
  min-height: 100vh; /* use min-height so element can grow*/
}

.cont > * {
  background: black;
  color: #fff;
}
.main {
  flex: 1 0 0; /* make the middle item fill whatever space is available*/
}
.header {
  width: 200px;
  /* the clip-path animation happens first and  takes a second to animate and then the margin and width animations follows after a 1s delay*/
  transition: clip-path 1s 1s, margin 1s, width 1s;
  clip-path: inset(0% 0% 0% 0%);
  margin-right: 5px;
}
/* JS adds the active class when clicked*/
.header.active {
  clip-path: inset(100% 0% 0% 0%);
  width: 0;
  margin-right: 0;
  overflow: hidden;
  transition: clip-path 1s, margin 1s 1s, width 1s 1s;
}
.footer {
  width: 200px;
  clip-path: inset(0% 0% 0% 0%);
  margin-left: 5px;
  transition: clip-path 1s 1s, margin 1s, width 1s;
}
/* JS adds the active class when clicked*/
.footer.active {
  clip-path: inset(100% 0% 0% 0%);
  width: 0;
  margin-left: 0;
  overflow: hidden;
  transition: clip-path 1s, margin 1s 1s, width 1s 1s;
}
.nav {
  display: flex;
  justify-content: space-between;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* Put your Js at the end of the html before the closing body tag rather than hi-jacking the onload event */


//use an iffe to enscapulate the code and protect the global namespace
(function clipMe(d) {
  "use strict";

  // declare the variables for use as constants
  const header = d.querySelector("#header");
  const footer = d.querySelector("footer");
  const leftColumn = d.querySelector("#col1");
  const rightColumn = d.querySelector("#col2");

  // when someone clicks the header element add an active class to the header element
  
  // use eventListeners and not onclick
  leftColumn.addEventListener(
    "click",
    () => {
      header.classList.toggle("active");
    },
    false
  );
 
  // when someone clicks the footer element add an active class to the footer element
  rightColumn.addEventListener(
    "click",
    () => {
      footer.classList.toggle("active");
    },
    false
  );
  
})(document);