Flexbox位置固定在左和右div

Question

我想修复布局的div映射和菜单div。标头和登录div已经修复，可以正常工作。但是，如何在不更改位置的情况下为地图div和菜单div做到这一点，它应该仍然可以响应？ 如果我将位置设置为菜单项固定，则宽度会发生变化；如果我将位置设置为固定于地图div，则宽度将无响应，并且布局会中断。

// Layout start page
@mixin heightItem($value) {
  height: $value;
}

.container {
  display: flex;
  flex-direction: column;
}

.login {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  border: 5px solid darkcyan;
  @include heightItem(20px);
  position: fixed;
  left: 0;
  right: 0;
}

.loginItem {
  flex: 0 1 30%;
  border: 5px solid lightpink;
}

header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 5px solid yellowgreen;
  margin-top: 28px;
  position: fixed;
  left: 0;
  right: 0;
  @include heightItem(50px);
}

.logo {
  flex-grow: 1;
  border: 5px solid fuchsia;
}

.searchFields {
  flex-grow: 5;
  border: 5px solid forestgreen;
}

.main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 88px;
}

.leftSide {
  display: flex;
  flex-direction: column;
  flex: 0 0 65%;
  border: 5px solid red;
}

.rightSide {
  flex: 1;
  border: 5px solid black;
}

.menuItem {
  background-color: #f5f5f5;
  border: 5px solid purple;
  position: fixed;
}

.content>.filterItem {
  border: 5px solid darkcyan;
  margin-top: 28px;
}


/*Mobile*/

@media (max-width: 600px) {
  .main {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column
  }
  header {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 5px solid yellowgreen;
    @include heightItem(200px);
  }
}

<div class="container">
  <div class="login">
    <div class="loginItem">LOGIN</div>
  </div>
  <header>
    <div class="logo">LOGO</div>
    <div class="searchFields">SEARCHFIELDS</div>
  </header>
  <div class="main">
    <div class="leftSide">
      <div class="menuItem">MENU TABS</div>
      <div class="content">
        <div class="filterItem">FILTER</div>
        <div class="contentItem">
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
          CONTENT
        </div>
      </div>
    </div>
    <div class="rightSide">
      <div class="thirdItem">MAP</div>
    </div>
  </div>
</div>