JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<!--
    notice the images are 300px tall.
    Even though the width of the images are affected by the flex layout, the height stays at 300px.
-->
<div class="slider">
    <img src="http://www.placebacon.net/900/1200" alt="Bacn">
    <img src="http://www.placebacon.net/600/300" alt="Bacn">
    <img src="http://www.placebacon.net/500/800" alt="Bacn">
    <img src="http://www.placebacon.net/1200/800" alt="Bacn">
</div>

CSS

html {
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
}

html, body {
  height: 100%;
}

.slider {
    display: flex;
    border: 10px solid red;
    height: 100%;
    overflow: auto;
}
.slider img {
    /* width: 25%; */
    /* margin: 0 5px; */
    width: auto;
    height: 100%;
}

JavaScript

* {margin: 0; padding: 0;}
.slider {
  font-size: 0;
}
.slider img {
  margin-right: 10px;
  width: calc(100% /4  - 7.5px);
}

.slider img:last-of-type {
  margin-right: 0;
}