Html Question posted in
Some basic documentation can be found here.

Html – How to get seperate Scrollbars X and Y in different divs with CSS Overflow

I’m trying to get a y-axis scrollbar inside a container to scroll 2 seperate divs, while having x-scrollbars on both of those divs individually. But it either doesn’t show up at all, or destroys any dimensions of my divs when I add overflow properties…

I marked the ones I need with "overflow: scroll". Hopes this helps in the very colorful example^^
Sorry for that. It helps me learn the effects of the different CSS Properties on the individual divs.

Furthermore the page doesn’t scale as expected. I tried to implement the fiddle example from another stack post: https://jsfiddle.net/2kh20Lsz/ to have static header and footer, but that didn’t really work in combination with the scrollbars I need in the middle.

Hope somebody knows how to get those things scrolling.

Full example: https://jsfiddle.net/MBittel/w8cvumqh/

enter image description here

html, body {
  height: 100%;
}
  
div {
  margin: 5px;
}

p {
  margin: 5px;
  background: green;
}

body {
  height: 100%;
}

#main-header, #footer {
  background: silver;
}

#wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#categoryViewContainer {
  display: flex;
  flex-direction: row;
  flex: 1;
  background: orange;
}

#header {
  display: flex;
  flex-direction: row;
  background: blue;
}

#splitter {
  display: flex;
  flex-direction: row;
  background: violet;
}

#right-header {
  overflow-x: auto;
}

#data {
  background: red;
}

#graph {
  background: yellow;
}

#splitter {
  overflow-y: scroll;
  background: pink;

}

#right-content {
  background: lime;
  overflow-x: scroll;
}

#left-content {
  background: gold;
  overflow-x: scroll;
}

#footer {
  flex-grow: 0;
  flex-shrink: 0;
}
<html>
<body>
  <div id="wrapper">
    <div id="main-header">Header</div>
    <div id="categoryViewContainer">
      <div id="data">

        <div id="header">
          <div id="left-header">
            <p>HeaderLeft</p>
          </div>
          <div id="right-header">
            <p>HeaderRight : dsafkljsadklfjkslajdfkljksaldfkasd</p>
          </div>
        </div>

        <div id="splitter">
           <div id="left-content">
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
          </div>
           <div id="right-content">
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>          
          </div>
        </div>

      </div>
      <div id="graph">
        <p>GraphGraphGraph</p>
      </div>
    </div>
    <div id="footer">
      Footer
    </div>
  </div>
</body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got it working like I wanted, but I don't really understand why it works.

    Why do I have to add flex on the wrapper div? Why do I have to add an "align-items: start"? Why the Overflow Hidden on the "data" and "categoryViewCointainer" div?

    https://jsfiddle.net/MBittel/hf425rvj/3/

    html,
body {
  height: 100%;
}
  
div {
  margin: 5px;
}

p {
  margin: 5px;
  background: green;
}

body {
  height: 100%;
}

#main-header,
#footer {
  background: silver;
}

#wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#categoryViewContainer {
  display: flex;
  flex-direction: row;
  flex: 1;
  background: orange;
  overflow: hidden;
}

#header {
  display: flex;
  flex-direction: row;
  background: blue;

  align-items:start;
}

#right-header {
  overflow-x: auto;
  
}

#data {
  background: red;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#row1 {
  display: flex;
  flex-direction: column;
  background-color:white;
  height:90px;
}

#row2 {
  display: flex;
  flex-direction: column;
  overflow:hidden;
  background-color:black;
}


#graph {
  width: 300px;
  background: yellow;
}

#splitter {
  display: flex;
  flex-direction: row;
  background: violet;
  overflow-x: hidden;
  overflow-y: auto;
  align-items:start;
}

#right-content {
  background: lime;
  overflow-x: auto;
  overflow-y: hidden;
}

#left-content {
  background: gold;
}

#footer {
  flex-grow: 0;
  flex-shrink: 0;
}
    <html>
<body>
  <div id="wrapper">
    <div id="main-header">Header</div>
    <div id="categoryViewContainer">
      <div id="data">

       <div id="header">
          <div id="left-header">
            <p>Liquidity Left</p>
          </div>
          <div id="right-header">
            <p>Liquidity Right : dsafkljsadklfjkslajdfkljksaldfkasd</p>
          </div>
        </div>
      
       <div id="splitter">
           <div id="left-content">
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
            <p>Left</p>
          </div>
           <div id="right-content">
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdF</p>          
          </div>
        </div>
      </div>
      <div id="graph">
        <p>Graph</p>
      </div>
    </div>
    <div id="footer">
      Footer
    </div>
  </div>
</body>
</html>


  2. 0

    If I understand your problem correctly… the issue is caused by the align-items property on the #splitter

    When using flex, the align-items property is set to stretch by default.

    If you change that to flex-start, it no longer stretches (or in this case: no longer shrinks) the 2 inner containers to be the same height.

    Try adding these 2 values to your jsfiddle (the max-height just lets us see the effect):

    #splitter {
    display: flex;
    flex-direction: row;
    background: violet;
    
    align-items:flex-start; /* added to give scrollbar */
    max-height:20em;        /* added for visibility in your example */

    overflow-y: scroll;
    background: pink;
}

    Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-align-items

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search