在使用overflow: auto属性时，无法隐藏滚动条的问题可能是由于不同浏览器对于隐藏滚动条的处理方式不同而引起的。解决方法可以使用以下代码来隐藏滚动条：

::-webkit-scrollbar { 
    display: none; 
}

但是这种方法只适用于Webkit浏览器，对于Firefox、Internet Explorer或者Opera浏览器并不起作用。如果需要兼容多个浏览器，可以使用JavaScript或者jQuery来实现隐藏滚动条的效果。具体的实现方法可以参考以下链接：

- [hide scrollbar while still able to scroll with mouse/keyboard](https://stackoverflow.com/questions/3293650/)

- [Hiding the scrollbar on an HTML page](https://stackoverflow.com/questions/3296644)

在使用CSS属性overflow: auto时，无法隐藏滚动条的问题是因为不同浏览器对于滚动条的样式设置有所不同。解决这个问题的方法是使用不同的CSS样式来隐藏滚动条。

对于Chrome、Safari和Opera浏览器，可以使用以下CSS样式来隐藏滚动条：

/* 隐藏Chrome、Safari和Opera的滚动条 */
.example::-webkit-scrollbar {
  display: none;
}

对于IE、Edge和Firefox浏览器，可以使用以下CSS样式来隐藏滚动条：

/* 隐藏IE、Edge和Firefox的滚动条 */
.example {
  -ms-overflow-style: none;  /* IE和Edge */
  scrollbar-width: none;  /* Firefox */
}

通过以上的CSS样式设置，可以在保持滚动条功能的情况下隐藏滚动条。这样用户在使用页面时就不会看到滚动条，但仍然可以通过鼠标滚轮或者触摸屏来进行页面滚动操作。

原因：当使用overflow: auto属性时，会自动显示滚动条，无法隐藏。

解决方法：将overflow属性的值改为其他可隐藏滚动条的值，例如overflow: hidden或overflow: scroll。

以下是整理后的

当我们使用overflow: auto属性时，希望能够控制元素的溢出内容并显示滚动条。然而，在某些情况下，我们可能希望隐藏滚动条，但发现无论如何设置，滚动条仍然显示出来。

原因就在于使用overflow: auto属性时，浏览器会自动显示滚动条，无法隐藏。那么，如何解决这个问题呢？

我们可以将overflow属性的值改为其他可隐藏滚动条的值，例如overflow: hidden或overflow: scroll。这样，滚动条就会被隐藏起来，达到我们的需求。

下面是一个示例代码：

.div {
  background-color: red;
  position: relative;
  height: 214px;
  overflow: hidden;
  width: 452px;
  margin: 0px auto;
}
#inner {
  width: 100%;
  overflow: hidden; /* 修改为隐藏滚动条 */
  height: 100%;
  padding-right: 15px;
}

通过将#inner元素的overflow属性的值改为hidden，我们成功隐藏了滚动条。

总之，当使用overflow: auto属性时，如果希望隐藏滚动条，可以将overflow属性的值改为其他可隐藏滚动条的值，例如hidden或scroll。这样，我们就可以根据实际需求来控制元素的溢出内容和滚动条的显示与隐藏了。