CSS3滚动条和容器问题

Question

当前，我正在尝试创建一个对象，例如一个部分由3个部分组成，其中第1和第2部分将具有一个联合的垂直滚动条，第2个部分将仅有一个水平的滚动条，第3个部分将在同一部分中独立滚动父母但是，当第1节低于第3节并隐藏其内容时，以及在第2节和第1节中都不能设置相同的高度时，我遇到了麻烦。

有人能弄清楚我在做什么错吗？

for (let i = 0; i < 10; i++) {
  let divStr = `<div id="layerFrames_${i}" class="layerFrames displayFlexRelative" style="min-width:200%;">`;
  for (let j = 0; j < 250; j++) {
    let inFrame = `<div class="frameinside blank displayFlexAbsolute width100 height100" style="">o</div>`;
    inFrame = j === 0 ? inFrame : "";
    divStr += `<div class="blankFrame frame displayFlexRelative" id="frame_${i}_${j}" style="min-height:100%; height:100%;" title="Frame ${i+1}, Layer ${j+1}">${inFrame}</div>`
  }
  divStr += "</div>";
  document.querySelector("#tlLayerHolder").innerHTML += divStr;

  divStr = ` <div id="layerName_0" class="layerName displayFlexRelative vertical-align-middle">Layer ${i+1}</div>`;
  document.querySelector("#tlLayerNames").innerHTML += divStr;
}

.displayFlexRelative {
  position: relative;
  display: flex;
  display: -webkit-flex;
}

.width100 {
  width: 100% !important;
  min-width: 100%;
}

.flexWrap {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}

.timelineCont {
  height: 120px;
  background-color: #ccc;
  font: "Arial";
  font-size: 12px;
}

.timelineCont .tlHolder {
  height: calc(100% - 20px);
  height: -webkit-calc(100% - 20px);
  overflow-y: scroll;
}

.vertical-align-middle {
  align-items: center;
  -webkit-align-items: center;
}

.height100 {
  height: 100%;
}

.flex-alignContentStart {
  align-content: flex-start;
  -webkit-align-content: flex-start;
}

.tlHolder .tlLayerNameHolder {
  border-right: 1px solid #fff;
  width: 199px;
  min-width: 199px;
}

.timelineHeadName {
  padding: 0 5px;
  width: 189px;
  min-width: 189px;
  border-right: 1px solid #fff;
  height: 100%;
}

.tlHolder .tlLayerNames {
  height: calc(100% - 20px);
  height: -webkit-calc(100% - 20px);
}

.tlLayerNames .layerName {
  height: 20px;
  width: calc(100% - 10px);
  width: -webkit-calc(100% - 10px);
  padding: 0 5px;
  margin-bottom: 1px;
}

.blankFrame {
  background: #fff;
  width: 7px;
  border: 1px solid #ccc;
  border-width: 0;
  border-right-width: 1px;
}

.layerFrames .blankFrame:nth-child(5n) {
  background: #e0dcd1;
}

.frameActive {
  background: #cacde8 !important;
}

.frameinside {
  border: 1px solid #000;
  border-width: 0 1px 1px 0;
  left: 0;
  top: 0;
  align-items: flex-end;
  font-size: 8px;
  justify-content: flex-end;
}

.frameinside.blank {
  background: #fff;
}

.frameinside.graphicFilled {
  background: #f2f3f4;
}

.layerFrames {
  height: 20px;
  margin-bottom: 1px;
}

.tlLayerNames .layerName:nth-child(odd) {
  background-color: #e6e6e6;
}

.tlLayerNames .layerName:nth-child(even) {
  background-color: #e8eaea;
}

.tlHolder .tlFrameHolder {
  width: calc(100% - 40px);
  width: -webkit-calc(100% - 40px);
  overflow-x: scroll;
}

.tlLayerButtons {
  height: 20px;
  background-color: #b8b8b8;
}

.timelineCont .tlHeader {
  height: 20px;
  background-color: #b8b8b8;
  font-weight: bold;
}

.timelineCont .tlButton {
  border-top: 1px solid #fff;
  height: 20px;
  background-color: #b8b8b8;
  padding: 0 5px;
}

.displayFlexAbsolute {
  position: absolute;
  display: flex;
  display: -webkit-flex;
}

.noScroll {
  overflow: hidden;
}

<div class='displayFlexRelative width100 timelineCont'>
  <div id="tlHolder" class="displayFlexRelative width100 tlHolder noScroll">
    <div id="tlLayerNameHolder" class="displayFlexRelative  tlLayerNameHolder flexWrap flex-alignContentStart">
      <div id="tlLayerNames" class="displayFlexRelative  tlLayerNames width100 flex-alignContentStart flexWrap">

      </div>
      <div id="tlLayerButtons" class="displayFlexRelative  tlLayerButtons width100 flex-alignContentStart ">
        <div id="addLayer" class="displayFlexRelative flexHCenter vertical-align-middle cursorPointer">Button 1</div>
        <div id="deleteLayer" class="displayFlexRelative flexHCenter vertical-align-middle cursorPointer">Button 2</div>
      </div>
    </div>
    <div id="tlLayerHolder" class="displayFlexRelative  tlFrameHolder flex-alignContentStart flexWrap noScroll">

    </div>
  </div>
</div>

Answer 1

for (let i = 0; i < 10; i++) {
  let divStr = `<div id="layerFrames_${i}" class="layerFrames displayFlexRelative" style="min-width:200%;">`;
  for (let j = 0; j < 250; j++) {
    let inFrame = `<div class="frameinside blank displayFlexAbsolute width100 height100" style="">o</div>`;
    inFrame = j === 0 ? inFrame : "";
    divStr += `<div class="blankFrame frame displayFlexRelative" id="frame_${i}_${j}" style="min-height:100%; height:100%;" title="Frame ${i+1}, Layer ${j+1}">${inFrame}</div>`
  }
  divStr += "</div>";
  document.querySelector("#tlLayerHolder").innerHTML += divStr;

  divStr = ` <div id="layerName_0" class="layerName displayFlexRelative vertical-align-middle">Layer ${i+1}</div>`;
  document.querySelector("#tlLayerNames").innerHTML += divStr;
}

.displayFlexRelative {
  position: relative;
  display: flex;
  display: -webkit-flex;
}

.width100 {
  width: 100% !important;
  min-width: 100%;
}

.flexWrap {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}

.timelineCont {
  height: 120px;
  background-color: #ccc;
  font: "Arial";
  font-size: 12px;
}

.timelineCont .tlHolder {
  height: calc(100% - 0px);
  height: -webkit-calc(100% - 0px);
  overflow-y: scroll;
}

.vertical-align-middle {
  align-items: center;
  -webkit-align-items: center;
}

.height100 {
  height: 100%;
}

.flex-alignContentStart {
  align-content: flex-start;
  -webkit-align-content: flex-start;
}

.tlHolder .tlLayerNameHolder {
  border-right: 1px solid #fff;
  width: 199px;
  min-width: 199px;
  height: 100vh;
  flex-direction: column;
  flex-wrap: nowrap;
}

.timelineHeadName {
  padding: 0 5px;
  width: 189px;
  min-width: 189px;
  border-right: 1px solid #fff;
  height: 100%;
}

.tlHolder .tlLayerNames {
  /*height: calc(100% - 20px);
  height: -webkit-calc(100% - 20px);*/
  flex: 1 0 100%;
  display: block;
}

.tlLayerNames .layerName {
  height: 20px;
  width: calc(100% - 10px);
  width: -webkit-calc(100% - 10px);
  padding: 0 5px;
  margin-bottom: 1px;
}

.blankFrame {
  background: #fff;
  width: 7px;
  border: 1px solid #ccc;
  border-width: 0;
  border-right-width: 1px;
}

.layerFrames .blankFrame:nth-child(5n) {
  background: #e0dcd1;
}

.frameActive {
  background: #cacde8 !important;
}

.frameinside {
  border: 1px solid #000;
  border-width: 0 1px 1px 0;
  left: 0;
  top: 0;
  align-items: flex-end;
  font-size: 8px;
  justify-content: flex-end;
}

.frameinside.blank {
  background: #fff;
}

.frameinside.graphicFilled {
  background: #f2f3f4;
}

.layerFrames {
  height: 20px;
  margin-bottom: 1px;
}

.tlLayerNames .layerName:nth-child(odd) {
  background-color: #e6e6e6;
}

.tlLayerNames .layerName:nth-child(even) {
  background-color: #e8eaea;
}

.tlHolder .tlFrameHolder {
  width: calc(100% - 40px);
  width: -webkit-calc(100% - 200px);
  overflow-x: scroll;
  position: absolute;
  left: 200px;
}

.tlLayerButtons {
  /*height: 20px;*/
  display: block;
  flex: 1 0 100%;
  background-color: #b8b8b8;
}

.timelineCont .tlHeader {
  height: 20px;
  background-color: #b8b8b8;
  font-weight: bold;
}

.timelineCont .tlButton {
  border-top: 1px solid #fff;
  height: 20px;
  background-color: #b8b8b8;
  padding: 0 5px;
}

.displayFlexAbsolute {
  position: absolute;
  display: flex;
  display: -webkit-flex;
}

.noScroll {
  overflow: hidden;
}

<div class='displayFlexRelative width100 timelineCont'>
  <div id="tlHolder" class="displayFlexRelative width100 tlHolder noScroll">
    <div id="tlLayerNameHolder" class="displayFlexRelative  tlLayerNameHolder flexWrap flex-alignContentStart">
      <div id="tlLayerNames" class="displayFlexRelative  tlLayerNames width100 flex-alignContentStart flexWrap">

      </div>
      <div id="tlLayerButtons" class="displayFlexRelative  tlLayerButtons width100 flex-alignContentStart ">
        <div id="addLayer" class="displayFlexRelative flexHCenter vertical-align-middle cursorPointer">Button 1</div>
        <div id="deleteLayer" class="displayFlexRelative flexHCenter vertical-align-middle cursorPointer">Button 2</div>
      </div>
    </div>
    <div id="tlLayerHolder" class="displayFlexRelative  tlFrameHolder flex-alignContentStart flexWrap noScroll">

    </div>
  </div>
</div>