<!--


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">
    <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.active {
  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.active {
  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");

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

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

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

  main.addEventListener(
    "click",
    () => {
      /* logic is as follows
      1) If both left and right columns are hidden then show them both.
      2) If main column is clicked and only one column is already hidden then show that column.
      3) If main column is clicked and both columns are present then hide both columns
      */

      if (header.classList.contains("active") && footer.classList.contains) {
        header.classList.remove("active");
        footer.classList.remove("active");
      } else if (
        header.classList.contains("active") ||
        footer.classList.contains("active")
      ) {
        header.classList.remove("active");
        footer.classList.remove("active");
      } else {
        header.classList.add("active");
        footer.classList.add("active");
      }
    },
    false
  );
})(document);