Bulma div dimensions inherit grandparent's - html

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

Not sure about Bulma but even with a barebones examples the viewer class will stay inside column1 no matter how big it is. (I added display: flex; just to align the columns horizontally and some borders for a visual)
.column-container {
display: flex;
padding: 5px;
border: 2px solid black;
}
#column1 {
border: 2px solid blue;
}
.viewer {
width: 100px;
height: 100px;
background-color: gray;
border: 2px solid red;
}
#column2 {
border: 2px solid green;
}
<div class="column-container">
<div id="column1">
<p>col 1</p>
<div class="viewer">
<p>viewer</p>
</div>
</div>
<div id="column2">
<p>col 2</p>
</div>
</div>

Answer 2

I finally solved this by setting the position of my #column1. My solution was:
div#column1{
position: relative;
}