CSS overflow problems

CSS overflow-y: visible, overflow-x: hidden

HTML

<section class="wrapper">
  <div class="slick-slider">
    <div class="slick-list">
      <div class="slick-track" style="width: 1062px;">
        <div class="slick-slide" style="width: 175px;"></div>
        <div class="slick-slide" style="width: 175px;"></div>
        <div class="slick-slide" style="width: 175px;"></div>
        <div class="slick-slide" style="width: 175px;">
          <div class="slick-content">
            <h3>headline</h3>
            <ul>
              <li>Dropdown 1</li>
              <li>Dropdown 2</li>
              <li>Dropdown 3</li>
            </ul>
          </div>
        </div>
        <div class="slick-slide" style="width: 175px;"></div>
        <div class="slick-slide" style="width: 175px;"></div>
      </div>
    </div>
  </div>
</section>

CSS

.wrapper {
  width: 850px;
}

.slick-slider {
  width: 100%;
  overflow-x: hidden;
}

.slick-list {
  display: block;
  width: 100%;
  position: relative;
  overflow: visible;
}

.slick-track {
  display: block;
  position: relative;
}

.slick-track::after,
.slick-track::before {
  clear: both;
  content: "";
  display: table;
}

.slick-slide {
  border: 1px solid black;
  color: black;
  display: block;
  float: left;
  height: 90px;
  position: relative;
}

.slick-content {
  height: 100%;
  padding: 15px 10px;
  position: absolute;
  top: 0;
  width: 100%;
}