css - 剧透菜单 - 很多内容实际上并未隐藏（在手机上）

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

标签： css