title: CSS: Make children inside parent responsive
body: <p>So I am not using any CSS framework like bootstrap to get responsiveness out of the box which is why I am having trouble making responsive layout.</p>
  
  <p><a href="http://jsbin.com/ludeqafile/edit?html,css,output" rel="nofollow noreferrer">Please see jsbin</a></p>
  
  <p>I essentially what to auto-resize colorful boxes based on browser window size eg that should shrink or grow automatically based on window size. Colorful boxes inside their parent should always be in horizontal row but should be able to adjust their width and height <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_nowrap8" rel="nofollow noreferrer">like this example</a>.</p>
  
  <p>I tried using <code>flex-wrap: nowrap;</code> but it didn't do the trick :(</p>
  
  <p>Please note that colorful boxes are using <code>position:absolute</code> with parent's position being <code>relative</code>. I am also adding <code>left</code> css property to these boxes via JavaScript to change their position for the sake of sliding animation.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Carousel(options) {
    options = options || {};
  
    // options vars
    let speed = options.speed || 1; // animation speed in seconds
    let width = options.width || 200;
    let height = options.height || 100;
    let space = options.space || 30;
  
    // other vars
    let container = document.querySelector('.carousel-container .carousel');
    let slides = container.querySelectorAll('.carousel-item');
    let curSlide = null;
    let prevSlide = null;
    let nextSlide = null;
  
    if (areSlidesPresent()) {
      setup();
    }
  
    // functions //
  
    function setup() {
      // we assume first slide to be current one as per UI requirements
      //slides[0].classList.add("current");
      curSlide = slides[0];
  
      // we assume second slide to be next as per UI requirements
      nextSlide = slides[1];
  
      // we assume last slide to be prev as per UI requirements
      prevSlide = slides[slides.length - 1];
  
      // position elements horizontally        
      positionSlides();
    }
  
    function areSlidesPresent() {
      return slides.length &gt; 0;
    }
  
    this.getCurrentSlide = function() {
      return curSlide;
    }
  
    this.getNextSlide = function() {
      return nextSlide;
    }
  
    this.getPreviousSlide = function() {
      return prevSlide;
    }
  
    this.setNextSlide = function() {
  
      if (areSlidesPresent()) {
        let allSlides = [];
  
        // build new order of slides
        allSlides.push(nextSlide);
  
        // middle ones
        for (let i = 2; i &lt; slides.length; i++) {
          allSlides.push(slides[i]);
        }
  
        allSlides.push(curSlide);
  
        // now add to DOM after cleaning previous slide order
        for (let i = 0; i &lt; allSlides.length; i++) {
          container.appendChild(allSlides[i]);
        }
  
        slides = allSlides;
  
        setup();
      }
    }
  
    this.setPreviousSlide = function() {
      if (areSlidesPresent()) {
        let allSlides = [];
  
        // build new order of slides
        allSlides.push(prevSlide);
        allSlides.push(curSlide);
  
        // middle ones
        for (let i = 1; i &lt; slides.length - 1; i++) {
          allSlides.push(slides[i]);
        }
  
        // now add to DOM after cleaning previous slide order
        for (let i = 0; i &lt; allSlides.length; i++) {
          container.appendChild(allSlides[i]);
        }
  
        slides = allSlides;
  
        setup();
      }
    }
  
    function positionSlides() {
  
      curSlide.style.marginLeft = '0px';
  
      for (let i = 0; i &lt; slides.length; i++) {
  
        slides[i].querySelector('.carousel-content').style.width = (width) + 'px';
        slides[i].querySelector('.carousel-content').style.height = (height) + 'px';
  
        let elementWidth = getStyle(nextSlide, 'width');
  
        if (i === 0) {
          slides[i].style.zIndex = -10;
          //slides[i].style.opacity = '1';
  
          slides[i].querySelector('.carousel-content').style.width = (width + 50) + 'px';
          slides[i].querySelector('.carousel-content').style.height = (height + 50) + 'px';
        } else {
          slides[i].style.zIndex = 0;
          //slides[i].style.opacity = '0.7';
        }
  
        if (i &gt; 0) {
          slides[i].style.marginLeft = (space * 2) + 'px';
          elementWidth = parseInt(elementWidth, 10) + space;
        }
  
        slides[i].style.transition = speed + 's';
        slides[i].style.left = (elementWidth * i) + 'px';
      }
    }
  
    function getStyle(el, prop) {
      return window.getComputedStyle(el, null).getPropertyValue(prop)
        .replace('px', '')
        .replace('em', '');
    }
  }
  
  // utility
  function log(text) {
    console.log(text);
  }
  
  var options = {
    speed: 1, // animation speed
    width: 250, // slide width
    height: 150, // slide height
    space: 25 // space in px between slides
  };
  
  var carousel = new Carousel(options);
  
  function selectCurrent() {
    log(carousel.getCurrentSlide());
  }
  
  function selectNext() {
    carousel.setNextSlide();
  }
  
  function selectPrev() {
    carousel.setPreviousSlide();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.carousel-container {
    width: auto;
    height: auto;
    margin: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .carousel {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .carousel .carousel-item {
    position: absolute;
    transition: transform .5s ease-in-out;
    color: #fff;
    margin-left: 10px;
    -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255, 255, 255, 0.2)));
  }
  
  .carousel .carousel-item:first-child .carousel-content {
    opacity: 1;
  }
  
  .carousel .carousel-item .carousel-title {
    font-size: 24px;
    text-align: center;
  }
  
  .carousel .carousel-item .carousel-content {
    font-size: 18px;
    font-weight: bold;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
  }
  
  
  /* temp css below */
  
  body {
    background: #2C374A;
    padding-top: 150px;
  }
  
  .navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 150px;
  }
  
  .button {
    color: #444;
    padding: 10px;
    width: 60px;
    cursor: pointer;
    background: #CCC;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    border-top: 1px solid #FFF;
    box-shadow: 0 5px 0 #999;
    transition: box-shadow 0.1s, top 0.1s;
    margin: 10px;
  }
  
  .button:hover,
  .button:hover {
    color: #000;
  }
  
  .button:active,
  .button:active {
    top: 104px;
    box-shadow: 0 1px 0 #999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="carousel-container"&gt;
    &lt;div class="carousel"&gt;
  
      &lt;div class="carousel-item"&gt;
        &lt;div class="carousel-title"&gt;Make a Call&lt;/div&gt;
        &lt;div class="carousel-content" style="background:#0E6DE8;border:10px solid #78B1FA"&gt;Slide One&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="carousel-item"&gt;
        &lt;div class="carousel-title"&gt;Send a Message&lt;/div&gt;
        &lt;div class="carousel-content" style="background:#D90080;border:10px solid #E357A9"&gt;Slide Two&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="carousel-item"&gt;
        &lt;div class="carousel-title"&gt;Send a Picture&lt;/div&gt;
        &lt;div class="carousel-content" style="background:#FEC601;border:10px solid #FFDD64"&gt;Slide Three&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="carousel-item"&gt;
        &lt;div class="carousel-title"&gt;Send a Video&lt;/div&gt;
        &lt;div class="carousel-content" style="background:#3DB365;border:10px solid #90E0AB"&gt;Slide Four&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="navigation"&gt;
    &lt;div class="button" onclick="selectNext()"&gt;Next&lt;/div&gt;
    &lt;div class="button" onclick="selectCurrent()"&gt;Select&lt;/div&gt;
    &lt;div class="button" onclick="selectPrev()"&gt;Prev&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>