scrollable column with restrained height without scrollbar
<p>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?</p>

<p>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: <a href="https://jsfiddle.net/jf90ktb0/2/" rel="nofollow">https://jsfiddle.net/jf90ktb0/2/</a></p>

<p>HTML:</p>

<pre><code>&lt;aside id="left" class="column"&gt;
  &lt;div class="inside"&gt;
    &lt;h1 class="columnHeader"&gt;Title&lt;/h1&gt;
    &lt;div class="mod_article"&gt;
      &lt;div class="ce_image"&gt;
        &lt;figure class="image_container"&gt;
          &lt;a href="#"&gt;
            &lt;img src="http://n22.imgup.net/Image_Plac000b.png"&gt;&lt;/img&gt;
          &lt;/a&gt;
        &lt;/figure&gt;
      &lt;/div&gt;
      &lt;div class="ce_image"&gt;
        &lt;figure class="image_container"&gt;
          &lt;a href="#"&gt;
            &lt;img src="http://n22.imgup.net/Image_Plac000b.png"&gt;&lt;/img&gt;
          &lt;/a&gt;
        &lt;/figure&gt;
      &lt;/div&gt;
      &lt;div class="ce_image"&gt;
        &lt;figure class="image_container"&gt;
          &lt;a href="#"&gt;
            &lt;img src="http://n22.imgup.net/Image_Plac000b.png"&gt;&lt;/img&gt;
          &lt;/a&gt;
        &lt;/figure&gt;
      &lt;/div&gt;
      &lt;div class="ce_image"&gt;
        &lt;figure class="image_container"&gt;
          &lt;a href="#"&gt;
            &lt;img src="http://n22.imgup.net/Image_Plac000b.png"&gt;&lt;/img&gt;
          &lt;/a&gt;
        &lt;/figure&gt;
      &lt;/div&gt;
      &lt;div class="ce_image"&gt;
        &lt;figure class="image_container"&gt;
          &lt;a href="#"&gt;
            &lt;img src="http://n22.imgup.net/Image_Plac000b.png"&gt;&lt;/img&gt;
          &lt;/a&gt;
        &lt;/figure&gt;
      &lt;/div&gt;
      &lt;div class="ce_image"&gt;
        &lt;figure class="image_container"&gt;
          &lt;a href="#"&gt;
            &lt;img src="http://n22.imgup.net/Image_Plac000b.png"&gt;&lt;/img&gt;
          &lt;/a&gt;
        &lt;/figure&gt;
      &lt;/div&gt;
      &lt;div class="ce_image"&gt;
        &lt;figure class="image_container"&gt;
          &lt;a href="#"&gt;
            &lt;img src="http://n22.imgup.net/Image_Plac000b.png"&gt;&lt;/img&gt;
          &lt;/a&gt;
        &lt;/figure&gt;
      &lt;/div&gt;
      &lt;div class="ce_image"&gt;
        &lt;figure class="image_container"&gt;
          &lt;a href="#"&gt;
            &lt;img src="http://n22.imgup.net/Image_Plac000b.png"&gt;&lt;/img&gt;
          &lt;/a&gt;
        &lt;/figure&gt;
      &lt;/div&gt;
      &lt;div class="ce_image"&gt;
        &lt;figure class="image_container"&gt;
          &lt;a href="#"&gt;
            &lt;img src="http://n22.imgup.net/Image_Plac000b.png"&gt;&lt;/img&gt;
          &lt;/a&gt;
        &lt;/figure&gt;
      &lt;/div&gt;
    &lt;/div&gt;                  
  &lt;/div&gt;
&lt;/aside&gt;
</code></pre>

<p>CSS:</p>

<pre><code>* {
    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%;
}
</code></pre>

<p>Hope someone can help me with this.</p>