1

I know my problem has to do with Understanding flexbox and overflow:auto but I can't for the life of me fix it...

I have a pretty complex structure which I've simplified to the maximum to display the "wrong" behaviour that I'm getting. Here it is: https://jsfiddle.net/8yv7aq1k/ [Edit: there is another version https://jsfiddle.net/8yv7aq1k/3/ which shows the problem better]

Basically, the "workspace" zone doesn't size to its content and so the absolutely positioned element "playbar" doesn't size to the 100% that I would like.

Can any CSS ninja help me out here... been stuck on this for a while.

Thanks

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  body {
    .wrapper {
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: red;
      padding: 20px;
      .track-list-and-workspace {
        position: relative;
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;
        display: flex;
        .workspace {
          flex: 1;
          position: relative;
          display: flex;
          flex-direction: column;
          padding: 10px;
          background-color: green;
          .content {
            background-color: white
          }
          .playbar {
            position: absolute;
            left: 50px;
            top: 0;
            height: 100%;
            width: 10px;
            background-color: black;
          }
        }
      }
    }
  }
}
<body>
  <div class="wrapper">
    <div class="track-list-and-workspace">
      <div class="workspace">
        <div class="playbar"></div>
        <div class="content">
          test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/> test
          <br/>test<br/> test
          <br/>
        </div>
      </div>
    </div>
  </div>
</body>

Edit: This version speaks better of the problem: https://jsfiddle.net/8yv7aq1k/3/

I need the scrolling to take place at .track-list-and-workspace level.

Edit2: Forgot to mention that there is a simple solutions using floats that I am using hoping I can find something better with flexboxes https://jsfiddle.net/8yv7aq1k/4/

FloG
  • 463
  • 5
  • 9
  • 1
    Just add `overflow: auto` to `.content`. https://jsfiddle.net/8yv7aq1k/1/ – Michael Benjamin Jul 11 '17 at 15:32
  • Thank you unfortunately it doesn't work for me. See https://jsfiddle.net/8yv7aq1k/3/ I actually need the scrolling to be done at .track-list-and-workspace – FloG Jul 11 '17 at 16:29
  • But the content isn't overflowing `.track-list-and-workspace`. It's overflowing `.track-list` and `.workspace`. – Michael Benjamin Jul 11 '17 at 16:39
  • I understand. I guess I'm wondering if there is a way to make it overflow its content but maintain the behaviour I'd like. – FloG Jul 11 '17 at 18:21

1 Answers1

1

You're using height:100%; when you should be using min-height:100%; on the wrapper div.

.wrapper {
  min-height: 100%;
}


* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html body .wrapper {
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: red;
  padding: 20px;
}

html body .wrapper .track-list-and-workspace {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

html body .wrapper .track-list-and-workspace .workspace {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 10px;
  background-color: green;
}

html body .wrapper .track-list-and-workspace .workspace .content {
  background-color: white;
}

html body .wrapper .track-list-and-workspace .workspace .playbar {
  position: absolute;
  left: 50px;
  top: 0;
  height: 100%;
  width: 10px;
  background-color: black;
}
<body>
  <div class="wrapper">
    <div class="track-list-and-workspace">
      <div class="workspace">
        <div class="playbar"></div>
        <div class="content">
          test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/> test
          <br/>test
          <br/> test
          <br/>
        </div>
      </div>
    </div>
  </div>
</body>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Because I thought `height: 100%;` and `min-height: 100%;` were the same, here's a SOF Q that I found to help clarify, [height:100% vs min-heigh: 100%](https://stackoverflow.com/questions/2341821/height100-vs-min-height100) – Mark Carpenter Jr Jul 11 '17 at 15:57
  • Thank you unfortunately it doesn't work for me. See https://jsfiddle.net/8yv7aq1k/3/ I actually need the scrolling to be done at .track-list-and-workspace – FloG Jul 11 '17 at 16:29