0

I have a child div, who's position is absolute and the left property is like -20px (just negative). The parent div has overflow:scroll but it does not allow to scroll to the left.

I've tried to delete parents or add wrappers, tried without the position properties, etc...

html

<div class="container">
  <div class="levels">
     <div class="level">
       <div class="node">Node1</div>
       <div class="node">Node2</div>
       <div class="node">Node3</div>
       <div class="node">Node4</div>
       <div class="node">Node5</div>
    </div>
  </div>
 </div>

css

.container {
  border: 1px solid red;
  margin: 20px;
  height: 200px;
  width: 900px;
  overflow: scroll;
}

.levels { 
  width: 100%;
  height: 100%;
  position: relative;
  
}

.level{
  border: 2px solid black;
  width: 536px;
  position: absolute;
  left: -20px;
}

.node {
  background-color: blue;
  border: 2px green solid;
  width: 100px;
  display: inline-block;
}

I've simulated a scenario in a CodePen

Id like to have more of those 'level' divs and even more aligned to the left, so i can simulate like a flow tree. If this isn't the way to go i'd like to hear.

Community
  • 1
  • 1
Stutje
  • 745
  • 6
  • 21
  • As position `absolute` is free by its parent so it cant scroll for that u need to remove that `absolute` – Awais Oct 25 '19 at 10:06
  • In general, you only get scrollbars if you position an element outside of the container element on the right or the bottom, but not on the left or top. (Vice versa regarding left/right, when the direction is RTL instead of LTR.) I can’t really see what exactly you are trying to achieve here though, or what _“simulate like a flow tree”_ is supposed to mean. – 04FS Oct 25 '19 at 10:06
  • @04FS with a flow tree i mean like this https://www.google.com/search?q=decision+tree&rlz=1C1GCEU_enBE824BE824&sxsrf=ACYBGNQ82utZ4jpOQiUu8fWJRdYfoogQHw:1572002077021&source=lnms&tbm=isch&sa=X&ved=0ahUKEwij-ouLpLflAhUiShUIHXjPAi4Q_AUIEigB&biw=1536&bih=722#imgrc=smjhNQRwQdoX9M: – Stutje Oct 25 '19 at 11:16
  • Well in that case, I’d suggest you don’t work with left position values that go into the negative, but “translate” the whole thing so the left-most element _is_ actually at the left side of the container element. Scrolling the container so that the middle / root element is visible on initial load or something, could then be done using JavaScript. – 04FS Oct 25 '19 at 11:29
  • I could do it like that but i think i found a solution [here](https://stackoverflow.com/a/31087670/9124424) without javascript – Stutje Oct 25 '19 at 13:03

0 Answers0