Flexbox 和尺寸问题 [重复]答案

【问题标题】：Flexbox and sizing issue [duplicate]Flexbox 和尺寸问题 [重复]
【发布时间】：2017-12-15 18:17:39
【问题描述】：

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

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

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

任何 CSS ninja 都可以在这里帮助我吗？我已经被困了一段时间了。

谢谢

* {
  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：忘了提到有一个使用浮动的简单解决方案，我正在使用它希望我能找到更好的弹性盒子https://jsfiddle.net/8yv7aq1k/4/

【问题讨论】：

只需将overflow: auto 添加到.content。 jsfiddle.net/8yv7aq1k/1
谢谢你，不幸的是它对我不起作用。请参阅jsfiddle.net/8yv7aq1k/3 我实际上需要在 .track-list-and-workspace 完成滚动
但是内容没有溢出.track-list-and-workspace。它溢出了.track-list 和.workspace。
我明白了。我想我想知道是否有办法让它溢出其内容但保持我想要的行为。

标签： html css flexbox overflow

【解决方案1】：

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

.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>

【讨论】：

因为我认为 height: 100%; 和 min-height: 100%; 是一样的，所以我发现这是一个 SOF Q 来帮助澄清，height:100% vs min-heigh: 100%
谢谢你，不幸的是它对我不起作用。请参阅jsfiddle.net/8yv7aq1k/3 我实际上需要在 .track-list-and-workspace 完成滚动