Bulma div dimensions inherit grandparent's

I'm using bulma as a CSS framework, I have something that looks like the following:

<div class="columns is-gapless">

  <div class="column is-four-fifths carte" id="column1">

    <div class="viewer">
      ...
    </div>

  </div>

  <div class="column is-flex is-fullheight" id="column2">
    ...
  </div>

</div>

in my css I have:

div#viewer{
   height: 100%;
   width: 100%;
}

The issue I'm facing is that my class viewer is inherting the height of columns and not from his parent 'column1'. in the end My class viewer overlaps my second column ('column2') and it's not the expected behaviour. I want my element viewer to stay inside the column1 div.