HTML - 特定のサイズに達したときに内側のボックスをスクロールする

Question

私は書く必要のある謎のHTMLを少し持っています。

特定のサイズに達すると、その内容が水平スクロールで表示されるようにする内部ボックスが必要です。

私は十分に明確であることを望む非常に詳細なスキーマを添付しました。

非常に災害の原因となったいくつかのアプローチを試したので、私は助けていただければ幸いです。好ましくはちょうどcss/html no 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>