「微博客」解决“设置overflow-y: auto;后，x轴上溢出的阴影会被裁切掉”的问题

HTML如下：

<div class="answers">
    ${statistic[index].get("content").map((v, i) => {
        return `<div class="option"><span class="answer-label">回答${i + 1}:</span>${v}</div>`;
    }).join('')}
</div>

解决方法

在外层标签的样式中多加一定长度（X）的padding和同样大小的负的margin（具体数值根据你被裁掉的大小来确定，X是多少，就能多显示出来多少被剪裁隐藏起来的内容。）

例：

.answers {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: visible;
    white-space: nowrap;
    padding: 20px;
    margin: -20px;
    padding-top: 0;
    margin-top: 0;
}

这样的话，top正常，左右下都会显示出来原本被裁掉的阴影。



问题出现的原因

设置overflow为visible之外的值之后，会形成块级格式化上下文(BFC)，导致原本在margin上的阴影就会被裁切隐藏掉，原本是不会的。所以需要用padding占据原来margin占据的空间，阴影在padding上就不会被裁切隐藏。

相关资料

• overflow:hidden和块级格式化上下文