剧透菜单-很多内容实际上并未隐藏（在电话上）

Question

我有一个简单的扰流器菜单，仅使用CSS（而JS用于更改按钮文本，但这并不重要）

.spoilerbutton {
    display:block;
    margin: 4px 0;
}
.spoiler {
  background-color: lightGreen;
    overflow:hidden;
  box-sizing: border-box;
    background: #f5f5f5;
}
.spoiler > div {
    -webkit-transition: all 0.3s ease;
    -moz-transition: margin 0.3s ease;
    -o-transition: all 0.3s ease;
  box-sizing: border-box;
  background-color: lightGreen;
    transition: margin 0.3s ease;
}
.spoilerbutton[value="Show"] + .spoiler > div {
  background-color: lightGreen;
  box-sizing: border-box;
    margin-top:-100%;
}
.spoilerbutton[value="Hide"] + .spoiler > div {
  background-color: lightGreen;
  box-sizing: border-box;
    padding:1px;
}

我添加了box-sizing: border-box;，该问题不会在PC上出现。现在，它仅出现在电话设备上：

（未单击“扰流板”按钮，并且某些信息不在外部）

我如何使用它：（JavaScript）

`<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
  ${smetki}
</div></div>`