Auto height doesn't work, only min-height does - css

Question

I have element on page, where I need to set height: auto, but it doesn't work the way I want to. Only min-height works, but when it's bigger that this, text goes over to the next element. Important thing to say, that I am reworking downloaded template. Everywhere else height: auto worked, but not here. I'm including the code below. I've already tried overflow: auto; but it just added scrollbar in the size of min-height value...
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>FB událost</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>FB událost</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>FB událost</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

Solved! I had to add exception for .front-content class, because there was only this:
.front-content{
position: absolute;
left: 50%;
z-index: 5;
}
So I had to edit it for .dates block:
.front-content.dates{
position: relative;
z-index: 5;
padding: 5px 10px 25px 10px;
}