Bulma div dimensions inherit grandparent's

Question

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.

Also same issue if I want to have the position of my viewer to be let's say 20px from the right border of my #column1 I did:

div.viewer{
    ...
    position: absolute;
    right: 20px;
}

However the viewer is 20px from the right border of my browser window and not my #column1

Answer 1

I finally solved this by setting the position of my #column1. My solution was:

div#column1{
    position: relative;
}