How to increasing width of relative div automatically in case of overflow?

Question

I have a div with position:absolute . Inside of that div I want to add some small divs programmatically. So I adjusted the overflow-x:scroll .

Now I want to have a div at the top of those small divs (the antiquewhite colored div in the picture). I adjusted its 'width:100%'. But as soon as I scroll to right to see the hidden contents I see that the div can not adjust its width to 100%.

This problem is exist also when I use the magnifier of the browser and change the view size.

How can I solve this problem?

Here is the code. The HTML part:

<div class='container'>
<div class='convas'>
  <div class='top'>

  </div>
  <div class='bottom' id='parent'>
  </div>
</div>
</div>

The CSS part:

.container{
  margin:10px;
  width:100%;
  position:relative;
}
.convas{
  border: 1px solid #000;
  height:200px;
  width:90%;
  position:absolute;
  top:0;
  left:0;
  overflow-x:scroll;
  }
  .top{
    width:100%;
    height:100px;
    border-bottom: 2px solid #000;
    background-color: antiquewhite;
  }
  .bottom{
  }
 .cell{
      border: 1px dashed #050505;                 
      width:20px;
      height:80px;
      position:absolute;
      left:0px;
      top:100px;  
  }

And the JavaScript part:

var parent = document.getElementById('parent');
console.log(parent);
for(var i=1; i<50;i++){
    let elem = document.createElement("div");
  elem.className = 'cell';
    elem.style.left = i* 20 +'px';
  elem.innerText = i;
  parent.appendChild(elem);
}

And here is the sample for running: https://jsfiddle.net/mjza/9nzzwxf4/1/

Thanks in advance.

Answer 1

see snippet bellow or jsfiddle here > jsfiddle

so i calculated the sum of the widths of all the cells . and then gave that width to the .top div

this calculation is made on window resize. and to make that happen also on page load , i called the resize() function on page load.

let me know if it helps

 var parent = document.getElementById('parent'); console.log(parent); for(var i=0; i<50;i++){ let elem = document.createElement("div"); elem.className = 'cell'; elem.style.left = i* 20 +'px'; elem.innerText = i; parent.appendChild(elem); } $(window).on("resize", function () { var totalWidth = 0; $('.convas .cell').each(function() { totalWidth += Number($(this).width()); }); $('.top').width(totalWidth) }).resize(); 

 .container{ margin:10px; width:100%; position:relative; } .convas{ border: 1px solid #000; height:200px; width:90%; position:absolute; top:0; left:0; overflow-x:scroll; } .top{ width:100%; height:100px; border-bottom: 2px solid #000; background-color: antiquewhite; } .bottom{ } .cell{ border: 1px dashed #050505; width:20px; height:80px; position:absolute; left:0px; top:100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='container'> <div class='convas'> <div class='top'> </div> <div class='bottom' id='parent'> </div> </div> </div> 

Answer 2

One possible solution is that you modify the top div as long as you create the cells inside of the Javascript.

Assume you top div have the id equal to top . Then the Javascript has to change like this:

var parent = document.getElementById('parent');
var top = document.getElementById('top');
for(var i=0; i<50;i++){
  let elem = document.createElement("div");
  elem.className = 'cell';
  elem.style.left = i*20 +'px';
  if(top.clientWidth < (i*20+20))
     top.style.width = (i*20 + 20) +'px';
  elem.innerText = i;
  parent.appendChild(elem);
}