horizontal responsive scrollbar
<p>i need a scrollbar(responsive) that has six rectangle like attachments. size of each rectlangle is 1/4 size of page.</p>

<p><a href="https://i.stack.imgur.com/UsQdo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UsQdo.jpg" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/Lpm9f.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lpm9f.jpg" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/cy4sF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cy4sF.jpg" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/B0PFB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B0PFB.jpg" alt="enter image description here"></a>
i write this code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;link href="Content/bootstrap.css" rel="stylesheet" /&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;style&gt;
        html, body { height: 100%; width: 100%; margin: 0; }
        .rows{
            height:33.333333333333333333%;
        }
        .cols{
            width:25%;
            float:right;
            height:100%;
            background-color:red;
            border:solid;
             font-size: 2.2vw;
             text-align:center;
             vertical-align:bottom;
            border-color:black;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="rows" &gt;

        sadfsadf
    &lt;/div&gt;
    &lt;div class="rows" style="width:150%;overflow-x:scroll;overflow-y:scroll;"&gt;
        &lt;div class="cols"&gt;salam&lt;/div&gt;
        &lt;div class="cols"&gt;salam&lt;/div&gt;
        &lt;div class="cols"&gt;salam&lt;/div&gt;
        &lt;div class="cols"&gt;salam&lt;/div&gt;
        &lt;div class="cols"&gt;salam&lt;/div&gt;
        &lt;div class="cols"&gt;salam&lt;/div&gt;


    &lt;/div&gt;
    &lt;div class="rows"&gt;

    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>but my code has following output:</p>

<p><a href="https://i.stack.imgur.com/eSuPm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eSuPm.jpg" alt="enter image description here"></a></p>

<p>any idea?</p>