CSS issues with expandable text inside modal

var coll = document.getElementsByClassName("qa");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("xactive");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

/*Main*/

html,
body,
div,
span,
p,
label,
footer,
header,
section,
button,
input,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: top;
  user-select: text;
  -webkit-user-select: text;
  letter-spacing: 0.01em
}

button,
input {
  display: inline-block;
  -webkit-appearance: none;
  outline: none;
  color: inherit;
  overflow: visible;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0
}

button {
  cursor: pointer
}


/*Button*/

.btn2 {
  display: inline-block;
  text-align: center;
  line-height: 1.17648;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 400;
  color: #06c;
  background: none;
  max-width: 100%;
  min-width: 26px;
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 22px;
  border: 1px solid #06c;
  text-overflow: ellipsis;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.btn2:hover {
  background: #06c;
  color: #fff
}


/*Modal*/

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: #f2f2f2;
  transition: opacity .1s ease;
  z-index: 7;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer
}

.modal-state {
  display: none
}

.modal-state:checked+.modal {
  opacity: 1;
  visibility: visible
}

.modal-state:checked+.modal .modal__inner {
  top: 0
}

.modal__inner {
  transition: top .1s ease;
  height: max-content;
  position:relative;
  max-width: 700px;
  margin: auto;
  padding: 1em 1em;
  border-radius: 5px
}

.modal__close {
  position: absolute;
  right: 1.1em;
  top: -.3em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
  z-index: 1
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #999;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #000
}

.modal__close:before {
  transform: rotate(-45deg)
}


/*Text*/

.qa {
  color: #000;
  font-weight: 600;
  font-size: 25px;
  cursor: pointer;
  padding-top: 13px;
  padding-bottom: 13px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  background: none
}

.qa:hover {
  color: #06c
}

.qa:after {
  content: '+';
  color: #000;
  float: right
}

.xactive:after {
  content: '×'
}

.qacontent {
  font-size: 25px;
  padding-bottom: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;
  border-bottom: 1px solid rgba(0, 0, 5, 0.1)
}

.qacontent p {
  margin: 0;
  padding: 0
}

html {
  overflow:hidden
}

body {
  max-height:100vh;
  overflow:auto;
}

<section>
  <div>
    <label class="btn2" for="modal-authorinterview">Author Interview</label>
  </div>
</section>

<input class="modal-state" id="modal-authorinterview" type="checkbox" />
<div class="modal"><label class="modal__bg" for="modal-authorinterview"></label>
  <div class="modal__inner"><label class="modal__close" for="modal-authorinterview"></label>

    <button class="qa">Title</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

    <button class="qa">Title2</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

    <button class="qa">Title3</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

    <button class="qa">Title4</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

  </div>
</div>

<p style="font-size:45px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, luctus quis pulvinar sit amet, tempor ac eros. Nam neque ex, gravida sit amet consequat ut, ullamcorper accumsan magna. In vulputate, lacus id dapibus finibus, magna nibh fringilla nisi, in tincidunt massa metus ut augue. Sed nisi nunc, faucibus varius massa eu, ornare cursus nibh. Suspendisse mauris erat, faucibus placerat volutpat et, commodo sed libero. Integer risus risus, pellentesque ac gravida ut, facilisis et ipsum. Morbi consectetur tincidunt eros, viverra consequat odio imperdiet in. Maecenas pellentesque, dui id placerat feugiat, turpis risus pellentesque lectus, sed congue massa orci in ex. Pellentesque volutpat eu lorem vel ultrices. Mauris ornare quis mauris in elementum. Proin dignissim est quam, tempor lacinia libero pretium nec. Fusce quis venenatis magna. Phasellus vitae volutpat sapien. Duis finibus, augue in sollicitudin molestie, turpis quam efficitur magna, sed dapibus dolor est nec orci. Proin mollis tellus eget risus malesuada, a consequat nunc dapibus. Donec quis nisl purus.</p>