Форматирование прокрутки с помощью webkit - Полоса прокрутки не отображается

Question

Итак, название гласит, что все это действительно, я отформатировал свою полосу прокрутки с помощью webkit, я получил форматирование, выглядящее нормально, но пришлось установить родительский div на переполнение: скрытый, чтобы остановить полосу прокрутки на child div от заполнения родителя, но теперь панель исчезла.

WEB-страница с проблемой: http://aspiresupportandhousing.com/

Вы можете увидеть проблему под заголовком новостей, вы можете увидеть дорожку, но не большой палец.

CSS:

#main_right { 
    height: 500px; 
    overflow: auto; 
    width: 285px; 
    top: 0px; 
    right: 0px; 
    background: url(../images/news.jpg) no-repeat center top #FFFFFF; 
    border: 1px solid rgba(93, 93, 94, 0.4); 
    border-radius: 20px; 
    box-shadow: 10px 10px 20px #5d5d5e; 
    position: absolute; 
    overflow: hidden; 
} 

#news { 
    height: 50px; 
    width: 100px; 
    top: 50px; 
    right: 0px; 
    position: absolute; 
    border-radius: 20px 0px 0px 20px; 
    background-color: #5d5d5e; 
    padding: 0px 10px; 
    line-height: 50px; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 22px; 
    font-weight: 400; 
    text-align: center; 
    color: #FFFFFF; 
} 

#news_info { 
    overflow: scroll; 
    width: 265px; 
    right: 0px; 
    top: 150px; 
    padding: 10px; 
    position: relative; 
} 

::-webkit-scrollbar { 
    width: 10px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.5); 
    border-radius: 8px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 8px; 
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.8); 
} 

HTML:

<div id="main_right"> 
     <div id="news">News</div> 
     <div id="news_info"> 
      <?php 
      require('news/wp-blog-header.php'); 
      ?> 
      <?php 
      $posts = get_posts('numberposts=5&order=DES&orderby=date'); 
      foreach ($posts as $post) : setup_postdata($post); ?> 
      <?php the_title('<h3>', '</h3>'); ?> 
      <?php the_excerpt('<b3>', '</b3>'); ?> 
      <br> 
      <?php 
      endforeach; 
      ?> 
     </div> 
</div> 

Любая помощь будет принята с благодарностью, спасибо, ребята.

Answer 1

Для того, чтобы полоса прокрутки работала, вам необходимо добавить высоту до <div id="news_info">.

#news_info { 
    overflow-x: auto; 
    width: 265px; 
    right: 0px; 
    top: 150px; 
    padding: 10px; 
    position: relative; 
    height: 322px; 
} 

Answer 2

просто добавить height: 330px; и overflow-x: hidden; в #news_info