텍스트가 자동으로 컨테이너 높이를 늘리지 않는 이유는 무엇입니까?

Question

shopify 사이트에서 제품의 설명을 가져 오는 태그 코드가 있습니다. 컨테이너의 너비가 설정되어 있기 때문에 대부분 잘립니다. 그러나 왜 컨테이너가 수직으로 움직이지 않고 컨테이너의 높이가 증가하는지 이해할 수 없습니까? 나는 overflow-x 시도 : 숨겨진 오버플로 - 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

변경이

이