JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="header"></div>
    <div class="content">
        <ul class="imglist">
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
            <li><img...

CSS

html, body { width: 100%; height: 100%; }
    body {
        margin: 0;
        padding: 50px 0;
        overflow: hidden;
    }

    *,
    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: 	border-box;
        box-sizing: 		border-box;
    }

    .header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 5;
        width: 100%;
        height: 50px;
        background-color: #f00;
    }
    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 5;
        width: 100%;
        height: 50px;
        background-color: #f00
    }

    .content {
        position: relative;
        margin: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100%;
        overflow-x: auto;
    }

    ul.imglist {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        list-style-type: none;
        overflow-x: auto;
        overflow-y: hidden;
    }
    ul.imglist li {
        margin: 0 5px 0 0;
        padding: 0;
        display: block;
        float: left;
        width: 100%;
        height: 100%;
    }
    ul.imglist li img {
        display: block;
        width: auto;
        height: 100%;
    }

JavaScript

$(document).ready(function(){

    horScoll();

    // On Load and On Resize
    $(window).on('load resize', function(){
        horScoll();
    });
});

function horScoll(){
    var parentSel = $('ul.imglist');
    var listSel = $('ul.imglist li');

    var liCount = $('ul.imglist li').length;
    var imgWidth = $('ul.imglist li img').width();

    parentSel.css({ width: liCount * imgWidth });
    listSel.css({ maxWidth: imgWidth });
}