具有固定寬度子項忽略寬度的Flexbox-有解無憂

我正在嘗試構建一個 3 列布局，我可以在其中折疊第三列。我的想法是簡單地將長度設定為孩子的固定數字（例如 600px 或 100px 折疊），這似乎不起作用。關于我可能做錯了什么的任何提示？

.container { 
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.left { 
  flex-basis: 2rem;
  flex-shrink: 0;
  height: 100%;
  overflow-x: auto;
  padding: 2rem;
  border: 1px solid red;
}
.main {
  flex: auto;
  height: 100%;
  overflow-x: auto;
  padding: 2rem;
  border: 1px solid blue;
}
.right {
  flex-basis: 600px;
  flex-shrink: 1;
  flex-grow: 0;
  overflow-x: auto;
  border: 1px solid green;
}
.child {
  width: 600px;
  height: 100%;
  background-color: black;
}

<div class="container">
  <div class="left"></div>
  <div class="main">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div class="right">
    <div class="child"></div>
  </div>
</div>

uj5u.com熱心網友回復：

根據上面的討論，您只需洗掉 'flex-basis: 600px;' 從 .right 規則：

<!DOCTYPE html>
<html>

<head>
  <style>
    .container {
      display: flex;
      height: 100vh;
      overflow: hidden;
    }
    
    .left {
      flex-basis: 2rem;
      flex-shrink: 0;
      height: 100%;
      overflow-x: auto;
      padding: 2rem;
      border: 1px solid red;
    }
    
    .main {
      flex: auto;
      height: 100%;
      overflow-x: auto;
      padding: 2rem;
      border: 1px solid blue;
    }
    
    .right {
      /*flex-basis: 600px;*/
      flex-shrink: 1;
      flex-grow: 0;
      overflow-x: auto;
      border: 1px solid green;
    }
    
    .child {
      width: 600px;
      height: 100%;
      background-color: black;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left"></div>
    <div class="main">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <div class="right">
      <div class="child"></div>
    </div>
  </div>
</body>

</html>

如果這不是預期的效果，請告訴我。

uj5u.com熱心網友回復：

它可以通過簡單的方式完成。只需設定左列并隨主列和右列而變化。

let button = document.getElementById("button");
let main = document.getElementsByClassName("main")[0];
let right = document.getElementsByClassName("right")[0];
    
const shrinkRightColumn = () => {
        right.style.width = 5   '%';
        main.style.width = 85   '%';    
}
    
button.addEventListener("click", shrinkRightColumn);

.container{
    display: flex;
    height: 200px;      
}
.left{
    background: red;
    width: 10%; 
}
.main{
    background: green;  
    width: 70%;
}
.right{
    background: yellow; 
    width: 20%;
}

<div class="container">
    <div class="left">a</div>
    <div class="main">a</div>
    <div class="right">a</div>
 </div>  


<button id="button" type="button">Shrink</button>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353050.html

標籤：css 弹性盒

上一篇：彈性顯示屬性和塊顯示屬性的區別

下一篇：Javascript-使用鍵盤自動管理輪播