自動高さが機能しない、最小高さだけが

Question

私はheight: autoを設定する必要があるページ上の要素がありますが、それは私がしたいように動作しません。 min-heightのみが動作しますが、これが大きくなると、テキストは次の要素に移動します。重要なことは、私はテンプレートをダウンロードし直していると言うことです。どこにいてもheight: autoは働いていましたが、ここにはありません。私は以下のコードを含んでいます。 ...私はすでにoverflow: auto;試みたが、それはちょうどmin-height値のサイズにスクロールバーを追加

HTML：

<section id="dates" class="full-wrapper parallax-wrapper dates"> <!-- Tour Dates --> 
     <div class="parallax" data-velocity="-.3" data-fit="0"> 

      <div class="front-content dates"> 
       <h1>Koncerty</h1> 
       <div class="spacer"></div> 
       <div class="dates-wrapper"> 
        <ul> 
         <li> <!-- List #2 --> <!-- max 5 Date Info elements per li --> 
          <div class="date-box"> <!-- Date Info 1 --> 
           <div class="info date"> 
            <div class="day">15</div> 
            <div class="month">zář</div> 
            <div class="year">2015</div> 
           </div> 
           <div class="info"> 
            <div class="city">Mladá Boleslav</div> 
            <div class="place"><div class="ico"></div>Nádvoří hradu</div> 
           </div> 
           <div class="info"> 
            <div class="time"><div class="ico"></div>19:00 - 20:00</div> 
            <div class="buy"><div class="ico"></div><a href="#">FB událost</a></div> 
           </div> 
           <div class="clear"></div> 
          </div> <!-- end Date Info 1 --> 

          <div class="date-box"> <!-- Date Info 2 --> 
           <div class="info date"> 
            <div class="day">11</div> 
            <div class="month">úno</div> 
            <div class="year">2016</div> 
           </div> 
           <div class="info"> 
            <div class="city">Plzeň</div> 
            <div class="place"><div class="ico"></div> 
            Pod Lampou</div> 
           </div> 
           <div class="info"> 
            <div class="time"><div class="ico"></div>20:30 - 21:30</div> 
            <div class="buy"><div class="ico"></div><a href="#">FB událost</a></div> 
           </div> 
           <div class="clear"></div> 
          </div> <!-- end Date Info 2 --> 

          <div class="date-box"> <!-- Date Info 3 --> 
           <div class="info date"> 
            <div class="day">24</div> 
            <div class="month">úno</div> 
            <div class="year">2016</div> 
           </div> 
           <div class="info"> 
            <div class="city">Praha</div> 
            <div class="place"><div class="ico"></div>Vagon</div> 
           </div> 
           <div class="info"> 
            <div class="time"><div class="ico"></div>21:00 - 22:00</div> 
            <div class="buy"><div class="ico"></div><a href="#">FB událost</a></div> 
           </div> 
           <div class="clear"></div> 
          </div> <!-- end Date Info 3 --> 


         </li> 

        </ul>  

       </div> 

      </div> 

      <div class="overlay"></div> 
     </div> 
    </section><!-- end Tour Dates --> 

CSS：

#dates>div:nth-of-type(1) { 
    background: url(../img/parallax/01.jpg) 50% 0% repeat-y fixed; 
    background-color: #333333; 
    margin: 0; 
    height: auto !important; 
    min-height: 200px; 
    position: relative; 
    width: 100%; 
    text-align: center; 
/* background-size: 100%;*/ 

    -moz-background-size: cover !important; 
    -o-background-size: cover !important; 
    -webkit-background-size: cover !important; 
    -khtml-background-size: cover !important; 
} 
.parallax-wrapper.dates { 
    height: auto; 
    min-height: 200px; 
    position: static; 
    width: 100% !important; 
    /*min-width: 1000px;*/ 
    margin: 0; 
    padding: 0; 
} 

.parallax-wrapper.dates h1 { 
color: white; 
} 

.front-content.dates{ 
    width: 500px; 
    margin-left: -250px; 
} 
.dates-wrapper{ 
    width: 600px; 
    height: auto; 
    min-height: 200px; 
    position: relative; 
    overflow: hidden; 
    margin-left: 10px; 
} 
.dates-wrapper ul li{ 
    float: left; 
    width: 600px; 
} 

.date-box{margin-bottom: 12px;} 
.date-box:last-child{margin-bottom: 0;} 
.date-box .info{ 
    float: left; 
    text-align: left; 
    padding-left: 10px; 
    color: #bbb; 
    max-width: 170px; 
    overflow: hidden; 
    font-size: 14px; 
} 
.date-box .info div{position: relative;} 
.date-box .info.date{ 
    width: 65px; 
    height: 80px; 
    background: #ee6c00; 
    color: #fff; 
    text-align: center; 
    padding-left: 0; 
} 

Answer 1

を解決します！私はこれだけがあったので、.front-contentクラスの例外を追加する必要がありました：あなたがターゲットにしようとしているどのような要素

.front-content.dates{ 
    position: relative; 
    z-index: 5; 
    padding: 5px 10px 25px 10px; 
}