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>