title: Slick slider same height images within nested flexbox
body: <p>I am new to using flexbox.  I have deployed slick slider within one of the elements of a flexbox grid.  I am using background images with bottom aligned gradient elements across the different elements of the grid. 
  This is the code</p>
  
  <pre><code>  &lt;div class="wrapper"&gt;
          &lt;div class="flex-container"&gt;
              &lt;div class="homepage-grid-left-col"&gt;
                  &lt;div class="homepage-grid-left-row"&gt;
                      &lt;div class="homepage-grid-left-slider"&gt;
                          &lt;div class="slide1"&gt;
                              &lt;div class="grid-title"&gt;
                                  &lt;h2&gt;Lorem ipsum dolor amet raclette venmo hexagon beard, green juice brunch ethical pinterest salvia&lt;/h2&gt;&lt;a class="btn btn-primary btn-sm" href="#"&gt;Read more&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="slide2"&gt;
                              &lt;div class="grid-title"&gt;
                                  &lt;h2&gt;Selfies intelligentsia kale chips before they sold out XOXO put a bird on it craft&lt;/h2&gt;&lt;a class="btn btn-primary btn-sm" href="#"&gt;Read more&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="slide3"&gt;
                              &lt;div class="grid-title"&gt;
                                  &lt;h2&gt;Flexitarian freegan mumblecore kale chips dreamcatcher live-edge, squid microdosing selfies. Beard af la croix shaman&lt;/h2&gt;&lt;a class="btn btn-primary btn-sm" href="#"&gt;Read more&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="homepage-grid-right-col"&gt;
                  &lt;div class="homepage-grid-top-right"&gt;
                      &lt;div class="grid-title"&gt;
                          &lt;h2&gt;Ugh tousled fam microdosing&lt;br&gt;
                          Try-hard affogato&lt;/h2&gt;&lt;a class="btn btn-primary btn-sm" href="#"&gt;Find out more&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="homepage-grid-bottom-right"&gt;
                      &lt;div class="homepage-grid-bottom-right-inner"&gt;
                          &lt;div class="grid-left"&gt;&lt;/div&gt;
                          &lt;div class="grid-right"&gt;
                              &lt;div class="grid-title"&gt;
                                  &lt;h2&gt;Pabst iPhone truffaut&lt;/h2&gt;&lt;a class="btn btn-primary btn-small" href="#"&gt;Find out more&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>                            html, body {
                              margin: 0;
                              }
                              .homepage-top .wrapper {
                                  position: relative;
                              }
                              .homepage-top .wrapper:after {
                                  padding-top: 50%;
                                  display: block;
                                  content: ' ';
                              }
                              .homepage-top .flex-container {
                                  position: absolute;
                                  top: 0;
                                  bottom: 0;
                                  right: 0;
                                  left: 0;
                                  padding: 5px;
                                  display: flex;
                                  -webkit-flex-wrap: wrap;
                                  flex-wrap: wrap;
                              }
                              .homepage-top .flex-container&gt;div {
                                  height: 100%;
                                  display: flex;
                                  flex-direction: column;
                              }
                              .homepage-top .flex-container&gt;div&gt;div {
                                  margin: 5px;
                                  display: flex;
                              }
                              .homepage-grid-left-col {
                                  width: 50.5%;
                              }
                              /*Slider styling */
                              .homepage-grid-left-col .homepage-grid-left-row {
                                  width: 98.5%;
                              }
                              .homepage-grid-left-slider {
                                  height: 100%;
                                  display: flex;
                                  overflow: hidden;
                              }
  
                              .slick-slide .slide1 {
                                  background-image: url("http://p-hold.com/585/540");
                                  background-repeat: no-repeat;
                                  background-size: cover;
                                  background-position: center;
                                  padding-top: 78.5%;
                              }
                              .slick-slide .slide2 {
                                  background-image: url("http://p-hold.com/585/540");
                                  background-repeat: no-repeat;
                                  background-size: cover;
                                  background-position: center;
                                  padding-top: 72.5%;
                              }
                              .slick-slide .slide3 {
                                  background-image: url("http://p-hold.com/585/540");
                                  background-repeat: no-repeat;
                                  background-size: cover;
                                  background-position: center;
                                  padding-top: 78.5%;
                              }
                              .slick-slide .grid-title h2 {
                                  font-size: 1.5em;
                                  color: #fff;
                                  text-shadow: 2px 2px #000;
                              }
                              .slick-slide .grid-title {
                                  padding: 2% 3% 7% 3%;
                                  background: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 15%, rgba(0, 0, 0, 0.75) 100%);
                                  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(15%, rgba(0, 0, 0, 0.40)), color-stop(100%, rgba(0, 0, 0, 0.75)));
                                  background: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 15%, rgba(0, 0, 0, 0.75) 100%);
                                  background: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 15%, rgba(0, 0, 0, 0.75) 100%);
                                  background: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 15%, rgba(0, 0, 0, 0.75) 100%);
                                  background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.40) 15%, rgba(0, 0, 0, 0.75) 100%) filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
                              }
                              .slick-dots li button {
                                  border: 3px solid #fff;
                                  border-radius: 50%;
                              }
                              .slick-dots li button::before {
                                  color: transparent;
                                  background: transparent;
                              }
                              .slick-dots li button:focus::before {
                                  opacity: 0;
                                  color: transparent;
                                  background: transparent;
                                  border-radius: 50%;
                              }
                              .slick-dots li button:hover::before, .slick-dots li.slick-active button::before {
                                  opacity: 1;
                                  color: #fff;
                                  background: #fff;
                                  border-radius: 50%;
                              }
                              .slick-dots {
                                  bottom: 55px;
                              }
                              .slick-prev, .slick-next {
                                  color: #fff;
                              }
                              .slick-prev {
                                  left: 10px;
                                  z-index: 10;
                              }
                              .slick-next {
                                  right: 10px;
                                  z-index: 10;
                              }
                              .homepage-grid-right-col {
                                  width: 49.5%;
                              }
                              .homepage-grid-right-col .homepage-grid-top-right {
                                  height: 50%;
                                  background: #ddd;
                                  background-image: url("http://p-hold.com/585/265");
                                  background-size: cover;
                                  background-position: center;
                              }
                              .homepage-grid-right-col .homepage-grid-bottom-right {
                                  height: 50%;
                              }
                              .homepage-grid-bottom-right-inner, .grid-right {
                                  flex: 1;
                                  display: flex;
                              }
                              .homepage-grid-bottom-right-inner .grid-left {
                                  width: 50%;
                                  margin-right: 5px;
                                  background-image: url("http://p-hold.com/280/270");
                                  background-size: cover;
                                  background-position: center;
                              }
                              .homepage-grid-bottom-right-inner .grid-right {
                                  width: 50%;
                                  background: #ddd;
                                  margin-left: 5px;
                                  background-image: url("http://p-hold.com/280/270");
                                  background-size: cover;
                                  background-position: center;
                              }
                              .homepage-grid-top-right .grid-title {
                                  height: 45%;
                                  width: 100%;
                                  padding: 10px 20px;
                                  display: inline-block;
                                  background: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 10%, rgba(0, 0, 0, 0.75) 100%);
                                  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(10%, rgba(0, 0, 0, 0.40)), color-stop(100%, rgba(0, 0, 0, 0.75)));
                                  background: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 10%, rgba(0, 0, 0, 0.75) 100%);
                                  background: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 10%, rgba(0, 0, 0, 0.75) 100%);
                                  background: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 10%, rgba(0, 0, 0, 0.75) 100%);
                                  background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.40) 10%, rgba(0, 0, 0, 0.75) 100%) filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
                              }
                              .homepage-grid-bottom-right .grid-right .grid-title {
                                  height: 45%;
                                  width: 100%;
                                  padding: 10px 20px;
                                  display: inline-block;
                                  background: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 5%, rgba(0, 0, 0, 0.75) 100%);
                                  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(5%, rgba(0, 0, 0, 0.40)), color-stop(100%, rgba(0, 0, 0, 0.75)));
                                  background: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 5%, rgba(0, 0, 0, 0.75) 100%);
                                  background: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 5%, rgba(0, 0, 0, 0.75) 100%);
                                  background: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 5%, rgba(0, 0, 0, 0.75) 100%);
                                  background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.40) 5%, rgba(0, 0, 0, 0.75) 100%) filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
                              }
                              .homepage-grid-top-right .grid-title, .homepage-grid-bottom-right .grid-right .grid-title {
                                  align-self: flex-end;
                              }
                              .homepage-grid-left-col .grid-title h2, .homepage-grid-top-right .grid-title h2, .homepage-grid-bottom-right-inner .grid-right .grid-title h2 {
                                  font-size: 1.5em;
                                  color: #fff;
                                  text-shadow: 2px 2px #000;
                              }
                              @media (max-width: 1200px) {
                                  .homepage-grid-top-right .grid-title {
                                      height: 55%;
                                  }
                                  .homepage-grid-bottom-right .grid-right .grid-title {
                                      height: 70%;
                                  }
                              }
                              @media (max-width: 992px) {
                                  .homepage-grid-left-col {
                                      width: 98.5%;
                                  }
                                  .homepage-grid-right-col {
                                      width: 100%;
                                  }
                                  .homepage-top .wrapper:after {
                                      padding-top: 100%;
                                      display: block;
                                      content: ' ';
                                      margin-bottom: 99%;
                                  }
                                  .homepage-grid-right-col .homepage-grid-top-right {
                                      height: 70%;
                                  }
                                  .homepage-grid-right-col .homepage-grid-bottom-right {
                                      height: 70%;
                                  }
                                  .homepage-grid-top-right .grid-title, .homepage-grid-bottom-right .grid-right .grid-title {
                                      height: 40%;
                                  }
                              }
                              @media (max-width: 768px) {
                                  .homepage-grid-top-right .grid-title, .homepage-grid-bottom-right .grid-right .grid-title {
                                      height: 95%;
                                  }
                              }
  </code></pre>
  
  <p>I would like to achieve the same within the slider whilst keeping the background image element as fix width.
  However I am finding the elements change size dependind on the length of the overlay.</p>
  
  <p>The issue is replicated in the codepen below: first and second slide background height changes depending on the length of the overlay.</p>
  
  <p><a href="https://codepen.io/nivims/full/MQzBdE/" rel="nofollow noreferrer">https://codepen.io/nivims/full/MQzBdE/</a></p>