Размеры булмы делятся от бабушки и дедушки

Question

Я использую bulma в качестве CSS фреймворка, у меня есть что-то похожее на следующее:

<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>

в моем css У меня есть:

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

Проблема, с которой я сталкиваюсь, заключается в том, что мой просмотрщик классов наследует высоту столбцов, а не его родительский столбец 'column1'. в конце концов, моя программа просмотра классов перекрывает мой второй столбец ('column2'), и это не ожидаемое поведение. Я хочу, чтобы мой элемент просмотра оставался внутри column1 div.

Также та же проблема, если я хочу, чтобы позиция моего зрителя была, скажем, в 20 пикселей от правой границы моего #column1 Я сделал:

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

Однако средство просмотра находится в 20 пикселях от правой границы окна моего браузера, а не от моего #column1

Answer 1

Я наконец решил это, установив позицию моего #column1. Мое решение было:

div#column1{
    position: relative;
}

Answer 2

Не уверен насчет Булмы, но даже с использованием простых примеров класс зрителя останется внутри column1, независимо от его размера. (Я добавил display: flex; просто чтобы выровнять столбцы по горизонтали и некоторые границы для визуала)

.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>