HTML absolute element interact with window bounds-CodePudding

I created a sample to show my problem:

<html>
<head>

</head>
<body>

<div id="container">
  <button>
  First
  </button>
  <button>
  Second
  </button>
  <button>
  Third
  </button>
  <button>
  Quad
  </button>  
</div>
    
</body>
</html>



#container{
  overflow: hidden;
  position: absolute;
  border: 1px solid gray;
  left: 0;
  right: auto;
}


window.onload=() => {
  const container=document.getElementById("container");
  container.style.left= (window.innerWidth-75) "px";
}

CodePudding user response：

You can use flexbox to make a column, it's realy powerful, flex-direction property make all childs in a column and display flex is needed to use flex-direction.

#container {
  display: flex;
  flex-direction: column;

  overflow: hidden;
  position: absolute;
  border: 1px solid gray;
  left: 0;
  right: auto;
}

CodePudding user response：

window.onload=() => {
  const container=document.getElementById("container");
  container.style.left= (window.innerWidth-75) "px";
}

#container{

  position: absolute;
  border: 1px solid gray;
  left: 0;
  right: auto;
  display: flex;
}

<html>
<head>

</head>
<body>



<div id="container">
  <button>
  First
  </button>
  <button>
  Second
  </button>
  <button>
  Third
  </button>
  <button>
  Quad
  </button>  
</div>



</body>
</html>

add display: flex; in #container