Javascript Случайная цитата - работает, но почему кнопка не отображается в ЭТОМ Div?

Question

Наконец-то у меня есть контейнер «Случайная цитата» с работающей кнопкой javascript /.

В настоящее время он работает в моем основном центральном разделе (oneSUB), но не в другом div. Я хотел бы иметь возможность переместить это в другое пространство сетки, например «четыре» в моем коде. «четыре» - это нижний правый меньший прямоугольник под «oneSUB»

Проблема в том, что кнопка (btnQUOTE) не отображается в «четыре». Возможно, это просто за пределами экрана, как я видел, в предыдущих попытках сделать кнопку случайной цитаты ... но все было иначе. Как / почему кнопка отсутствует в «четыре»?

«четыре» содержит и растягивается для содержимого, такого как абзацы, и даже когда оно развернуто внизу, кнопка никогда не отображается плавающей в другом месте, поэтому я бы не стал Не думаю, что он находится за пределами div, но похоже, что кнопка там ведет себя иначе ....

HTML:

      <div class="container-QUOTE">
        <div class="quote-text">
          <h1 id="quote"> I could eat a horse.</h1>
          <p id="author"> - whoever said</p>
        </div>
        <button id="btnQUOTE">Click Here</button>
      </div>

CSS:

.oneSUB {
  background-color: rgba(255, 255, 255, .7);
  font-family: 'Roboto', sans-serif;
  grid-area: one;
  word-wrap: break-word;
  padding-left: 0px;
  padding-top: 0px;
  height: 100%;
  margin: 0px;
  max-width: 100%;
}


.four {
  background-color: rgba(255, 255, 255, .7);
  grid-area: four;
  padding-left: 0px;
  padding-top: 0px;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  word-wrap: break-word;
}

#btnQUOTE {
  margin-top: 30px;
  font-size: 25px;
  padding: 10px 20px;
  background-color: #191716;
  color: #F15025;
  text-transform: uppercase;
}


.container-QUOTE {
  background-color: #fff;
  width: 180vw;
  max-width: 100%;
  max-height: 100%;
  padding: 40px;
  height: 55vh;
  border-left: 3px solid #f15025;
}

Большое спасибо! Дайте мне знать, могу ли я предоставить что-нибудь еще, основанное на коде этого руководства: https://www.youtube.com/watch?v=0poDnc5X7Zk&

JS Fiddle: https://jsfiddle.net/o2t1qya5/1/

Answer 1

Хорошо, похоже, это проблема CSS, вот объявление оскорбительного стиля

.wrapper article div {
  /* height: 100%; <-- Removed this */ 
  border-radius: 12px;
}

Кажется, это решило.