Почему мой текст автоматически не увеличивает высоту контейнера?

Question

На сайте shopify у меня есть код тегов, который должен вытащить описание продукта. Большая часть его обрезается, потому что контейнер имеет заданную ширину, но я не понимаю, почему он не будет просто вертикально и увеличивать высоту контейнера? Я попробовал overflow-x: hidden, overflow-y: видимый, но это не делает. Даже если я установил для контейнера фиксированную высоту, текст не будет работать вертикально. Что мне здесь не хватает?

<li class="grid-item one-fifth product-excerpt"> 
     {% assign featured = link.title | append: ' featured' | handleize %} 
     {% if linklists[featured].links %} 
     {% assign featured_object = linklists[featured].links.first %} 
     <a href="#">Featured</a> 
      <img src="{{ featured_object.object.featured_image | product_img_url: 'medium'}}" /> 
      <a href="{{featured_object.url}}">{{featured_object.object.title}}</a> 

//need this text to run vertically 
     <span>{{featured_object.object.description | strip_html | slice: 0, 100 | append: '...' }}</span> 

     {% endif %} 

     </li> 

CSS

.site-nav--dropdown .product-excerpt span { 
font-size: 14px; 
font-family: 'Open Sans'; 
display: block; 
width: 100%; 
overflow: hidden; 
padding: 0px 0px 13px 0px; 
} 

.site-header .grid>.grid-item, .site-header .grid--rev>.grid-item, .site-header .grid--full>.grid-item { 
float: none; 
display: table-cell; 
vertical-align: middle; 
} 

Answer 1

изменить это overflow: hidden; к overflow: auto;