working option (with grid)

by ShaCP

HTML

<div class="container">
<div class="menu">
<button class="slide_out">
OPEN/CLOSE MENU
</button>
</div>
<div class="content">
</div>
</div>

CSS

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.menu {
  background-color: lightpink;
  position: relative;
  width: 100%;
  min-width: 0;
  transition: 1s min-width linear, 1s width linear;
  /* margin-left: auto;, margin-inline-start: auto or justify-self: end
  makes the menu appear from the right, so from out of the content */
  /* margin-left: auto; */
  /* margin-inline-start: auto; */
  justify-self: end;
}

.content {
  background-color: lightblue;
  position: relative;
  /* min-width: 400px; */
  /* margin: 0 auto; */
}

.container {
  height: 100vh;
  margin: auto;
  max-width: 700px;
  overflow: hidden;
  /*   justify-content: center; */
  display: grid;
  grid-template-columns: 1fr minmax(0, 400px) 1fr;
}

/* button */

.slide_out {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 9999;
  white-space: nowrap;
}



/* end button code */

.content::before {
  content: "middle of screen";
  writing-mode: vertical-rl;
  text-orientation: upright;
  border-left: 1px solid black;
  width: 1px;
  margin: 0;
  display: block;
  height: 100%;
  position: absolute;
  left: 50%;
}

@media screen and (max-width: 549px) {

  .menu.open {
    min-width: 150px;
  }

  .menu:not(.open) {
    width: 0;
  }

  .content {
    min-width: 400px;
  }

  .menu.open~.content::before {
    content: "";
  }
}

@media screen and (max-width: 399px) {
  .content {
    min-width: 100vw;
  }
}

/* */

JavaScript

const button = document.querySelector(".slide_out");
const menu = document.querySelector(".menu");
button.addEventListener("click", () => menu.classList.toggle("open"))