scrollable column with restrained height without scrollbar - html

Question

I tried building a sidebar with some listview-like images. The column has a dynamic height and a header which should be always visible but not fixed. The content should be scrollable but without seeing a scrollbar. At first I tried to just push the scrollbar out of the container usind padding-right, but then I wont be able to use the 100% width on the images. So next there was display:table ... I read that overflow only works on display:block, but isnt there some way to make tables scrollable?
I am working with CONTAO as a CMS so I am bound by the templates (which I can edit to some degree). Here's the structure + CSS: https://jsfiddle.net/jf90ktb0/2/
HTML:
<aside id="left" class="column">
<div class="inside">
<h1 class="columnHeader">Title</h1>
<div class="mod_article">
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
</div>
</div>
</aside>
CSS:
* {
margin: 0px;
padding: 0px;
}
body {
font: 87.5% Verdana, Arial, Helvetica, sans-serif;
}
img {
vertical-align: bottom;
}
.column {
display: inline-block;
background-color: #b2b2b2;
height: 50vh;
margin: 0px 3% 0px 3%;
float: left;
overflow: hidden;
}
#left {
width: 20%;
margin-left: 3%;
right: 0;
}
#left .inside {
height: 100%;
width: 100%;
overflow: hidden;
display: table;
}
#left .columnHeader {
background-color: #333;
color: #ffd800;
font-size: 1.5vw;
text-align: center;
text-transform: uppercase;
padding-top: 0.5vw;
padding-bottom: 0.5vw;
width: 20vw;
display: table-caption;
}
#left .mod_article {
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
display: table-row;
}
#left .ce_image {
width: 100%;
float: left;
display: table-cell;
}
#left .ce_image img {
width: 100%;
}
Hope someone can help me with this.

Answer 1

Here is your solution:
remove display: table-row;
and add this line to your css:
::-webkit-scrollbar {
width: 0px;
}