Warum erhöht mein Text nicht automatisch die Höhe des Containers?

Question

Auf einer Shopify-Seite habe ich einen Code-Code, der die Beschreibung eines Produkts enthalten soll. Der größte Teil davon wird abgeschnitten, weil der Container eine festgelegte Breite hat, aber ich verstehe nicht, warum er nicht nur vertikal verläuft und die Höhe des Containers erhöht. Ich habe versucht overflow-x: versteckt, overflow-y: sichtbar, aber das tut es nicht. Auch wenn ich den Container auf eine feste Höhe festlegen, wird der Text nicht vertikal ausgeführt. Was fehlt mir hier?

<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

Änderung dieser overflow: hidden; zu overflow: auto;