Боковое меню Flexbox

Пожалуйста, попробуйте это:

HTML:

<link rel = "stylesheet" type = "text/css" href = "main.css">

<div class = "container">
<div class = "menu">
    a
</div>

<div class = "content">
    <span id = "clickable">
        basdasdasdasdas
    </span>
</div>
<div>

CSS

.test{
    background-color:red;
}

.container{
    display:flex;
    flex-direction: row;
    position:relative;
    height:100%;
}

.menu{
    width:200px;
    transition: 0.3s all ease-in-out;
    background-color:red;
}

.menuClosed{
    background-color:red;
    transition: 0.3s all ease-in-out;
    transform: translateX(-200px);
    margin-right: -200px;
}

.content{
    background-color:yellow;
    flex:1;
}

Я изменил класс menuClosed, переместив его влево с помощью преобразования: translateX (-200px). Чтобы экран снова сдвинулся вправо, я добавил отрицательное поле того же размера справа.

Возможно, это не лучшая практика - я готов услышать другие решения!

Кроме того, в качестве плюса я изменил ваш код Javascript, чтобы переключить класс, заставив его открываться и закрываться по щелчку, а не только открываться.

Вы можете увидеть новый код здесь, на Codepen. Надеюсь, это вам поможет!

@PossessWithin Зачем вам для этого нужен translateX?

Вы должны использовать свойства flexbox-shrink и flexbox-basic, которые созданы специально для этих случаев.

Я сделал скрипку, проверь это здесь JSFiddle

<aside class = "sidebar is-visible">
    <p class = "sidebar-content">
      Put all your content inside of here since this keeps the width of your sidebar <br>(so a div with the width       you want the sidebar to be).
    </p>
  </aside>
  <main class = "content">
    <button class = "toggle-sidebar">Toggle sidebar</button>
    <p>
      scale this content
    </p>
  </main>

CSS

*{
    box-sizing: border-box;
}

html, body  {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: flex-end;
}

.content {
  display: flex;
  min-height: 0;
  flex-direction: column;

  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
}


.sidebar {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;

  height: 100%;
}

.sidebar.is-visible  ~ .content {
  flex-basis: 0;
}

/* Animation */
.content {
  transition: flex-basis .1s cubic-bezier(.465, .183, .153, .946);
  will-change: flex-basis;
}

.sidebar.is-visible  ~ .content {
  transition: flex-basis .3s cubic-bezier(.465, .183, .153, .946);
}


.sidebar-content {
  display: block;
  width: 300px;
  background-color: #eee;
  height: 100%;
  margin: 0;
  padding: 20px;
  border-right: 1px solid #ccc;
}

.content {
  padding: 20px;
}

Пожалуйста, проголосуйте за это, так как это должно быть сделано.