How to set a horizontally oriented flexbox div inside a flex item of a vertically oriented flexbox div?

Question

NOTE: You can skip the full explanation and scroll down to TLTR section.

I want to implement a slider like in this page positioned inside a vertical flexbox. I have the following code and it represents the inner flexbox div which is positioned horizontally i.e. the slider's layout.

  .img {
    max-height: 100%;
  }

  .items {
    display: flex;
    flex-direction: row;
    height: 100%;
  }

  .item {
    height: 100%;
    border: 1px solid black;
  }

  .container {
    overflow: hidden;
    flex: 1 1 auto;
    height: 80%;
    width: 100%;
  }

<div class='container'>
  <div class='items' style='height: 100%'>
    <div class='item'>
     <a href="#"><img class='img' src="/img1.jpg" alt="this expected to be image 1"/></a></div>
    <div class='item'><a href="#"><img class='img' src="/img2.jpg" alt="this expected to be image 2"/></a></div>
    <div class='item'><a href="#"><img class='img' src="/img3.jpg" alt="this expected to be image 3"/></a></div>
  </div>
</div>

The outer flexbox div looks like this:

.main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.title {
  flex: 0 0 60px;
  border: 1px solid black;
}

.slider {
  flex: 1 0 auto;
  border: 1px solid black;
}

<div class="main">
  <div class="title">Title</div>
  <div class="slider">Slider</div>
</div>

The code for the inner flexbox div is rendering well on any browser. The same is the case with the code for the outer flexbox div. The problem comes when I put the inner flexbox div inside div.slider. The browser cannot render the HTML as expected. If I set height and min-height of div.title and height of div.slider then everything works on Firefox and Chrome. Cannot test it on Safari but I have the feeling that it won't work and I'm missing something. I tested on Epiphany browser which is developed on WebKit (same as Safari) and it fails to render. I've come across similar issues in the past, working with flexbox and overflowing divs and I know that there might be a browser's issue. If I remove height and min-height of div.title and div.slider and change some CSS params I could make the page render on Chrome but still fails to render on Firefox. Am I missing something or doing something wrong? I need a cross-browser solution.

================== TLTR ==================

Here it is a full example - https://jsfiddle.net/SitkaCharley/xht9vaef/10/

I expect the images in div.slide to resize and fit inside it even though they are different sizes. Instead I see images with different sizes and a verticall scroll bar when images are too big. My understanding is that since the .main div is instructed to take 100% of windows height the .title will take 60px and .slider will take the rest of parent's height (see .slider's flex item css instructions). Then the .container is expected to take 80% out of parent's height and .img's max-height: 100% will force to resize images to the height of their parents which is the height of .container.