Flexbox with fixed width child ignoring width-CodePudding

I'm trying to build a 3 column layout where I can collapse the 3rd column. My idea was to simply set the length to a fixed number for the child (e.g. 600px or 100px for collapsed) and this doesn't seem to work. Any hints on what I may be doing wrong?

.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>

CodePudding user response：

Based on discussion above you simply have to remove 'flex-basis: 600px;' from .right rule:

<!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>

Let me know if this is not the desired effect.

CodePudding user response：

It can be done in a simple way. Just set the left column and vary with the main and the right ones.

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>