title: set all owl carousel items with equal height
body: <p>I am working on owl carousel I want all items with the same height when there is more content added items height are not coming equal. I tried with flex properties also but am not understanding why it is 
     not working. please, anyone, point me in the right direction I really stuck in these. Thanks in Advance 
      Here it is <a href="https://codepen.io/asiyafatima_12/pen/GRKzdeX" rel="noreferrer">codepen</a></p>
  
  <p><strong>Expected Output</strong><a href="https://i.stack.imgur.com/6thLd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6thLd.png" alt="Image"></a></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>  $(document).ready(function() { 
      $('#article-carousel').owlCarousel({
            loop: true,
            autoplay: true,
            autoHeight: true,
            autoplayTimeout: 2000,
            margin: 10,
            dots: false,
            nav: true,
             responsive:{
              0: {
                items: 1,
              },
              768: {
                items: 4,
              },
              1024: {
                items: 4,
              },
              1100: {
                items: 4
              }   
            }
        })
     });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
        margin: 0;
        padding: 0;
    }
      .wrapper {
        position: relative;
        overflow: hidden;
      }
      .section-inner {
          position: relative;
          width: 100%;
          max-width: 1140px;
          margin: 0 auto;
      }
      .article-items {
          display: flex;
          flex: 1 0 auto;
      }
        .articles-wrap {
        position: relative;
        padding: 80px 0;
        background: #f7f5f2;
    }
    .article-title {
      font-family: "Filson Soft", sans-serif;
      font-size: 52px;
      font-weight: bold;
      letter-spacing: 1.06px;
      color: #3b3d4e;
      padding-bottom: 60px;
       padding-top: 40px;
    }
    .aticle-box {
        position: relative;
        overflow: hidden;
      margin-bottom: 80px;
    }
    .box-img { display: block; }
    .box-title {
        font-family: "Poppins", sans-serif;
        font-size: 24px;
        font-weight: 500;
        line-height: 1.42;
        letter-spacing: -0.51px;
        color: #000000;
        margin-bottom: 25px;
       }
      .box-content {
        font-family: "Poppins", sans-serif;
        font-size: 18px;
        font-weight: 300;
        line-height: 1.44;
        letter-spacing: -0.7px;
        color: #000000;
         padding: 30px 25px;
          flex: 1 0 auto;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          background: #ffffff;
      }
      .box-content p { opacity: 0.5; }
      .box-btn a {
        opacity: 0.2;
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: #000000;
          padding-top: 30px;
          line-height: 2.63;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: end;
          -ms-flex-pack: end;
          justify-content: flex-end;
       }
       .box-btn {
          position: relative;
          padding: 10px;
       }
       .article-img { position: relative; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;head&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
       &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    
    &lt;div class="wrapper"&gt;  
    &lt;div class="articles-wrap"&gt;
     &lt;div class="section-inner"&gt;
      &lt;h2 class="article-title"&gt;News articles&lt;/h2&gt;
      &lt;div id="article-carousel" class="owl-carousel owl-theme"&gt;
       &lt;div class="item article-items"&gt;
         &lt;div class="aticle-box"&gt;
         &lt;figure&gt;&lt;img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"&gt;&lt;/figure&gt;
         &lt;div class="box-content"&gt;
          &lt;h4 class="box-title"&gt;News articles Title articles News articles Title article                   Titles&lt;/h4&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero&lt;/p&gt;
          &lt;div class="box-btn"&gt;
           &lt;span&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="item article-items"&gt;
        &lt;div class="aticle-box"&gt;
         &lt;figure&gt;&lt;img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"&gt;&lt;/figure&gt;
         &lt;div class="box-content"&gt;
          &lt;h4 class="box-title"&gt;News articles Title&lt;/h4&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero&lt;/p&gt;
           &lt;div class="box-btn"&gt;
           &lt;span&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
         &lt;div class="item article-items"&gt;
        &lt;div class="aticle-box"&gt;
         &lt;figure&gt;&lt;img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"&gt;&lt;/figure&gt;
         &lt;div class="box-content"&gt;
          &lt;h4 class="box-title"&gt;News articles Title articles Title articles articles&lt;/h4&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero&lt;/p&gt;
          &lt;div class="box-btn"&gt;
           &lt;span&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="item article-items"&gt;
        &lt;div class="aticle-box"&gt;
         &lt;figure&gt;&lt;img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"&gt;&lt;/figure&gt;
         &lt;div class="box-content"&gt;
          &lt;h4 class="box-title"&gt;News articles Title&lt;/h4&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero&lt;/p&gt;
          &lt;div class="box-btn"&gt;
           &lt;span&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
        &lt;div class="item article-items"&gt;
        &lt;div class="aticle-box"&gt;
         &lt;figure&gt;&lt;img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"&gt;&lt;/figure&gt;
         &lt;div class="box-content"&gt;
          &lt;h4 class="box-title"&gt;News articles Title articles Title articles articles&lt;/h4&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero&lt;/p&gt;
          &lt;div class="box-btn"&gt;
           &lt;span&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
        &lt;div class="item article-items"&gt;
         &lt;div class="aticle-box"&gt;
         &lt;figure&gt;&lt;img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"&gt;&lt;/figure&gt;
         &lt;div class="box-content"&gt;
          &lt;h4 class="box-title"&gt;News articles Title&lt;/h4&gt;
          &lt;p&gt;ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero&lt;/p&gt;
          &lt;div class="box-btn"&gt;
           &lt;span&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt; &lt;!--carousel ends here--&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>