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>