另一个具有“最大宽度”的 div 中的 div 容器出现了

Question

该网站的width 最多应为1300px 和三列：左、内容和右。
所有列都应该可以单独滚动。
按下按钮后，左右列应消失到外面。
其中大部分已经有效，但我找不到以下解决方案：

• 右栏在页面外（忽略最大宽度？）
• 所有三列在淡出时表现不同；
• • 右边好，左边太快，内容跳跃不褪色

/* dont display the checkboxes */
#nav_toggle_right,#nav_toggle_left{
  position:absolute; opacity:0; display:none
}

/* more useless space */
ul li{
  line-height: 8;
}

/* left button */
#nav_toggle_left~label.nav_toggle_left {
  position:fixed; 
  display:block; 
  cursor:pointer; 
  text-align:center; 
  z-index:300; 
  font-size:28px; 
  width:40px; 
  height:40px; 
  top:9px; 
  left:20px; 
  line-height:40px;
}

#nav_toggle_left~label .lable_before {
  display:block; 
  color:#000000; 
  background-color:#FFFFFF; 
  border:1px solid #000000; 
  border-radius:10px;
}

#nav_toggle_left~label .lable_after {
  display:none;
}

#nav_toggle_left:checked~label .lable_before{
  display:none;
}

#nav_toggle_left:checked~label .lable_after {
  display:block; 
  color:#000000; 
  background-color:#FFFFFF; 
  border:1px solid #000000; 
  border-radius:10px;
}

#nav_toggle_left:checked~.menu_left {
  -webkit-transform:translateX(-100vw); 
  transform:translateX(-100vw)
}

/* right button */
#nav_toggle_right~label.nav_toggle_right {
  position:fixed; 
  display:block; 
  cursor:pointer; 
  text-align:center; 
  z-index:300; 
  font-size:28px; 
  width:40px; 
  height:40px; 
  top:9px; 
  right:20px; 
  line-height:40px;
}

#nav_toggle_right~label .lable_before {
  display:block; 
  color:#000000; 
  background-color:#FFFFFF; 
  border:1px #000000); 
  border-radius:10px;
}

#nav_toggle_right~label .lable_after {
  display:none;
}

#nav_toggle_right:checked~label .lable_before{
  display:none;
}

#nav_toggle_right:checked~label .lable_after {
  display:block; 
  color:#000000; 
  background-color:#FFFFFF; 
  border:1px #000000);
  border-radius:10px;
}

#nav_toggle_right:checked~.menu_right {
  -webkit-transform:translateX(290px); 
  transform:translateX(290px)
}

/* widht of page */
.page{
  max-width:1050px;
}

/* left menu */
.menu_left{
  height:100%; 
  width:250px; 
  background-color:#f5f5f5; 
  border-right:solid 1px #c9c9c9; 
  inline-height:20px;
  overflow-y:scroll; 
  overflow-x:hidden; 
  scrollbar-width:none; 
  left:0px; 
  top:0px; 
  position:fixed; 
}

/* right menu */
.menu_right{
  height:100%; 
  width:250px; 
  background-color:#e3e3e3; 
  border-left:solid 1px #c9c9c9; 
  overflow-y:scroll; 
  overflow-x:hidden; 
  scrollbar-width:none; 
  right:0px; 
  top:0px; 
  position:fixed;
}

/* content */
.content{
  height:1000vh; 
  min-width:300px; 
  background-color:#FCFCFC; 
  scrollbar-width:none; 
  overflow-y:scroll; 
  overflow-x:hidden; 
  scrollbar-width:none; 
  margin-left:250px; 
  margin-right:250px; 
  padding:20px 20px 20px 20px;
}

/* content without menu(s) */
#nav_toggle_left:checked~.content{
  margin-left:0px!important;
}

#nav_toggle_right:checked~.content{
  margin-right:0px!important;
}

/* same transition for both menues */
.transition{    
  -webkit-transition:1.53s transform;
  transition:1.53s transform;
  -webkit-transition-timing-function:cubic-bezier(.38,.52,.37,1); 
  transition-timing-function:cubic-bezier(.38,.52,.37,1);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

<div class="page">
    <input type="checkbox" id="nav_toggle_left">
    <label class="nav_toggle_left" for="nav_toggle_left">
        <span class="lable_after">
            <i class="fa fa-bars"></i>
        </span>
        <span class="lable_before">
            <i class="fa fa-times"></i>
        </span>
    </label>

    <div class="menu_left transition">
        <ul>
            <li>Menu left</li>
            <li>Menu left</li>
            <li>Menu left</li>
            <li>Menu left</li>
            <li>Menu left</li>
            <li>Menu left</li>
            <li>Menu left</li>
            <li>Menu left</li>
        </ul>     
    </div>

    <input type="checkbox" id="nav_toggle_right">
    <label class="nav_toggle_right" for="nav_toggle_right">
        <span class="lable_after">
            <i class="fa fa-list"></i>
        </span>
        <span class="lable_before">
            <i class="fa fa-times"></i> 
        </span>
    </label>
    <div class="menu_right transition">
        <ul>
            <li>Menu right</li>
            <li>Menu right</li>
            <li>Menu right</li>
            <li>Menu right</li>
            <li>Menu right</li>
            <li>Menu right</li>
            <li>Menu right</li>
            <li>Menu right</li>
        </ul>  
    </div>

    <div class="content">
        <i class="fa fa-list"></i> 
        <i class="fa fa-times"></i>
        <i class="fa fa-bars"></i>
        
        If you were a member of the Bloods and became paralyzed do you then become a member of the Crips?. If you were a member of the Bloods and became paralyzed do you then become a member of the Crips?. Smiling could easily be misinterpreted for showing your teeth to someone because they said something that made you happy. Twitter is the rice of social media. Smiling could easily be misinterpreted for showing your teeth to someone because they said something that made you happy. A tagline for a special highway that is easy to navigate while under the influence of drugs: Take the High Road. Why don't we call glasses duocles. North America should be called Russia since people are always moving so fast. Gralitica. We need more werkin and less twerkin if you ask me. Balooby. I started a sensory deprivation chamber business - it involves really dark curtains, ear plugs, and a sleeping mask. To Catch A Predator would have been a great name for a Steve Irwin show. Mintslavicia. North America should be called Russia since people are always moving so fast. Gralitica. Most streets are two-way streets...why does that make love so special?. Thank you for using my words in your work. Twitter is the rice of social media.
    </div>

</div>

或codepen

Answer 1

也许你可以使用 flex-grow/flex-shrink。 https://css-tricks.com/almanac/properties/f/flex-shrink/ 您可以使用它获得一致的过渡。 此问题/答案中给出的一些示例 Transition flex-grow of items in a flexbox