<!--
Forum question answer only:

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

Forked from Paul's original version: https://codepen.io/paulobrien/pen/GRYjgvx

-->

<div class="cont">
  <header class="header" id="header">
    <p>Left Column</p>
  </header>
  <main class="main" id="main">
    <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*/
}

.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,  margin 1s, width 1s;
  clip-path: inset(0% 0% 0% 0%);
  margin-right: 5px;
}
/* JS adds the active class when clicked*/
.header.supressed {
  clip-path: inset(100% 0% 0% 0%);
  width: 0;
  margin-right: 0;
  overflow: hidden;
  transition: clip-path 1s, margin 1s, width 1s;
}
.footer {
  width: 200px;
  clip-path: inset(0% 0% 0% 0%);
  margin-left: 5px;
  transition: clip-path 1s, margin 1s, width 1s;
}
/* JS adds the active class when clicked*/
.footer.supressed {
  clip-path: inset(100% 0% 0% 0%);
  width: 0;
  margin-left: 0;
  overflow: hidden;
  transition: clip-path 1s, margin 1s, width 1s;
}

/* 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 main = d.querySelector("#main");
  const className = "supressed";  
  
  // method to add/remove class if appropriate.
  const toggle = (elem) => {
  if (elem.classList.contains(className)) {
    elem.classList.remove(className);
  }
  else {
    elem.classList.add(className);
  }   
  };

  // when someone clicks the header element add an active class to the header element

  // use eventListeners and not onclick
  header.addEventListener(
    "click",
    () => {
      toggle(header);
    },
    false
  );

  // when someone clicks the footer element add an active class to the footer element
  footer.addEventListener(
    "click",
    () => {
      toggle(footer);
    },
    false
  );

  main.addEventListener(
    "click",
    () => {
      const hdrHidden = header.classList.contains(className);
      const ftrHidden = footer.classList.contains(className);
      if ((hdrHidden && ftrHidden) || (!hdrHidden && !ftrHidden)) {
        // Both header & footer are showing/hidden, so toggle both...
        toggle(header);
        toggle(footer);        
      } else if (hdrHidden) {
        // only header is hidden
        toggle(header);
      } else {
        // only footer is hidden
        toggle(footer);        
      }
    },
    false
  );
})(document);