HTML - Scrolling innere Box, wenn es eine bestimmte Größe erreicht

Question

Ich habe ein bisschen ein rätselhaftes Stück HTML, das ich schreiben muss.

Ich brauche eine innere Box, die, wenn sie eine bestimmte Größe erreicht, erlaubt, dass ihr Inhalt mit einer horizontalen Rolle angezeigt wird.

Ich habe ein ziemlich detailliertes Schema beigefügt, von dem ich hoffe, dass es klar genug ist.

Ich habe einige Ansätze ausprobiert, die in äußerster Katastrophe resultierten, so würde ich jede Hilfe schätzen. Vorzugsweise nur CSS/HTML kein Javascript.

Answer 1

Hier gehen Sie: 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>