抽屉菜单问题：绝对位置和最大高度

Question

我不知道为什么我的抽屉菜单如此怪异。折叠菜单时，部分菜单仍然可见（其中22px）。但是当我以为它不会变得更糟时，我发现如果绝对放置菜单，菜单可能会与其他元素重叠。瞧，现在抽屉的宽度比激活它的按钮还宽。

这可能是Squarespace的怪癖吗？还是可能是用户错误？

演示：Book Info button

代码如下：

  $('button.accordion').css('font-weight','300');
  
  var acc =  document.getElementsByClassName("accordion");
var i;

for (i = 0; i <  acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
      var dropdown = this.nextElementSibling;
    if (dropdown.style.maxHeight){
        dropdown.style.maxHeight = null;
    } else {
      dropdown.style.maxHeight =  dropdown.scrollHeight + "px";
    } 
  }
}

.arcan-info {
  width: 228px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.1);
  //border: 1px solid red;
  border-radius: 10px;
  overflow: hidden;
}

.arcan-info button.accordion {
  // H2 style
  color: hsl(0,0,100%);
  font-size: 32px;
  font-family: 'DIN Condensed';
  font-weight: 300;
  font-style: normal;
  letter-spacing: 1px;
  text-transform: lowercase;
  //
  line-height: 1em;
  background-color: #ddd;
  border: none;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  outline: none;
}

.arcan-info button.accordion:active{
  border-radius: 10px 10px 0 0;
  transition: border-radius 0.2s ease-out;
}

.arcan-info button.accordion:after {
  content: '\0FF0B';
  font-size: 24px;//color: black
  float: right;
  //margin-left: 5px;
  color: white;
}

.arcan-info button.accordion.active:after {
  content: '\0FF0D';
}

.info-wrapper {
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0 0 10px 10px;
  margin: 0;
  padding: 10px;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  max-height: 0;
  transition: max-height 0.2s ease-out;
  position: absolute;
  overflow: hidden;
}

.info-wrapper ul{
  padding: 0;
  list-style-type: none;
}

.info-wrapper li{
  line-height: 2em;
}

.book-isbn {
  display: inline-block;
}

.book-isbn li{
  font-family: 'DIN Condensed', sans-serif;
  font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='arcan-info'>     
  <button class='accordion' type='button'>Book Info</button>
  <div class='info-wrapper'>
    <h3>
      Arcan: The Missing Nexus
    </h3>
    <ul>
      <li><strong>Author:</strong> Julian C. Brooks</li>
      <li><strong>Genre:</strong> Fantasy/Sci-Fi</li>
      <li><strong>Pages:</strong> 460</li>
      <li><strong>Ages:</strong> 12-22</li>
      <li><strong>Publisher:</strong> EPOCH Studios, LLC</li>
    </ul>
    <p>
      <strong>ISBN</strong>
    </p>
    <div class='book-isbn'>
      <ul>
        <li>978-0-9975570-0-8 (print)</li>
        <li>978-0-9975570-1-5 (ebook)</li>
      </ul>
    </div>
    
  </div>
</div>