水平和垂直滚动条（如果内容超出div中指定的宽度和高度，

Question

#myleft {
  float: left;
  width: 20%;
  position: relative;
}

#myRight {
  float: left;
  width: 80%;
  position: relative;
}

.displayBox {
  float: left;
  width: 33%;
  position: relative;
  height: 60px;
  overflow: auto;
}

<div>
  <div id="myLeft">
    <h4>Left Content</h4>
  </div>
  <div id="myRight">
    <div class="displayBox">
      <p>Display the first content on BOX 1</p>
    </div>
    <div class="displayBox">
      <p>Display the first content on BOX 2. The content might overflow if it exceeds the height of 60px otherwise its perfectly fine.</p>
    </div>
    <div class="displayBox">
      <p>Display the first content on BOX 3</p>
    </div>
    <div class="displayBox">
      <p>Display the first content on BOX 4 and horizontal scroll bar</p>
    </div>
  </div>
  <div>

myRight div中可能有三个或更多 div 。我希望同一行上的所有div都不会通过水平滚动溢出到下一行。对于内容溢出，我已经为每个div指定了60px的高度，并指定了溢出：auto，这会给我垂直滚动条。同样，如果要超过3个div，我希望水平滚动。

Answer 1

您可以使用float来代替display: flex。

display: flex并排对齐block子级（类似于float）。将flex: 0 0 auto;添加到这些子项可阻止它们包装。

要显示水平滚动条，可以使用overflow-x: auto;。

.container {
  display: flex;
}

#myLeft {
  width: 20%;
}

#myRight {
  width: 80%;
  display: flex;
  overflow-x: auto;
}

.displayBox {
  width: calc(100% / 3); /* to achieve perfect thirds */
  flex: 0 0 auto;
  height: 60px;
  overflow: auto;
}

<div class="container">
  <div id="myLeft">
    <h4>Left Content</h4>
  </div>
  <div id="myRight">
    <div class="displayBox">
      <p>Display the first content on BOX 1</p>
    </div>
    <div class="displayBox">
      <p>Display the first content on BOX 2. The content might overflow if it exceeds the height of 60px otherwise its perfectly fine.</p>
    </div>
    <div class="displayBox">
      <p>Display the first content on BOX 3</p>
    </div>
    <div class="displayBox">
      <p>Display the first content on BOX 4 and horizontal scroll bar</p>
    </div>
  </div>
</div>