Flexbox和大小调整问题

时间：2017-07-11 15:26:43

标签： html css css3 flexbox overflow

我知道我的问题与Understanding flexbox and overflow:auto有关，但我无法解决它的生活......

我有一个非常复杂的结构，我已经简化到最大程度，以显示我得到的“错误”行为。这里是： https://jsfiddle.net/8yv7aq1k/ [编辑：还有另一个版本https://jsfiddle.net/8yv7aq1k/3/可以更好地显示问题]

基本上，“工作区”区域的大小并不适合其内容，因此绝对定位的元素“playbar”的大小不会达到我想要的100％。

任何CSS忍者都能在这里帮助我......已经坚持了一段时间。

由于

* {
  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>

编辑：此版本更能说明问题：https://jsfiddle.net/8yv7aq1k/3/

我需要在.track-list-and-workspace级别进行滚动。

Edit2：忘记提到有一个使用浮动的简单解决方案我正在使用希望我能用flexboxes找到更好的东西https://jsfiddle.net/8yv7aq1k/4/

1 个答案:

答案 0 :(得分：1)

当您在包装器div上使用height:100%;时，您正在使用min-height:100%;。

.wrapper {
  min-height: 100%;
}

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题