HTML - 达到特定大小时滚动内部框

Question

我必须编写一段令人费解的 HTML。

我需要一个内框，当达到特定大小时，它允许通过水平滚动显示其内容。

我附上了一个非常详细的架构，我希望它足够清楚。

我尝试了几种导致最大灾难的方法，因此我将不胜感激任何帮助。最好只有 css/html 没有 javascript。

Answer 1

给你: http://codepen.io/dherran/pen/KzEdZZ

.wrapper {
  width: 400px;
}

.left {
  float: left;
  height: 100px;
  max-width: calc(100% - 40px);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.right {
  float: left;
  width: 40px;
  height: 100px;
  background: black;
  color: white;
  text-align: center;
}

.box {
  display: inline-block;
  width: 40px;
  height: 100px;
  border: 1px solid white;
  background: blue;
}

<div class="wrapper">
  <div class="left">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="right">
    +
  </div>
</div>