Setting overflow-x: hidden adds a vertical scrollbar [duplicate]

后端未结

关注

 10  938

滥情空心

相关标签:

10条回答

无人共我

2021-02-06 20:59
Check out this answer to a related question: https://stackoverflow.com/a/6433475/3583023

It explains why
```
el {
  overflow-x: hidden;
  overflow-y: visible;
}
```
renders as
```
el {
  overflow-x: hidden;
  overflow-y: auto;
}
```
which usually renders the same as
```
el {
  overflow-x: hidden;
  overflow-y: scroll;
}
```
because the auto value of overflow-y is scroll in most browsers.

So, in order to achieve this effect, we can't use the overflow-x/overflow-y properties. I've experimented with the clip property as a potential alternative, but no luck so far: http://jsfiddle.net/qvEq5/
0 讨论(0)
发布评论:

提交评论
- 加载中...

一整个雨季

2021-02-06 21:03

Just use overflow: hidden on a wrapper div with size constraints. Excuse my formatting in a bit of a rush today.

<!DOCTYPE html>
<html>
<head>
<style>
div.hidden 
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
div.overflowing
{
width:300px;
height:200px;
}
</style>
</head>

<body>
<p>overflow:hidden</p>
<div class="hidden">
<div class="overflowing">
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
</div>
</div>
</body>
</html>

See it in action here: http://jsfiddle.net/4PZC9/

0 讨论(0)

逝去的感伤

2021-02-06 21:06
Give this a try:
```
height: auto;
width: 100px;
overflow: hidden;
```
Should keep the element at 100px wide, and allow it to expand vertically based on its content (without scrollbars).
0 讨论(0)
发布评论:

提交评论
- 加载中...
终归单人心

2021-02-06 21:08

Maybe you misunderstood something, I didn't unsdertood the question... or the problem is not in the overflow settings.

Overflow: auto will add the scrollbar only if needed (content bigger than container). Òverflow: visible will add the scrollbar. Òverflow: hidden will NOT add the scrollbar.

I understand that you want the x-content to be hidden, so overflow-x: hidden, but from your question it seems to me that don't want the vertical scrollbar to see the vertically overflowed content.

Maybe the problem is that is set a fixed height (or max-height) for the container and the content is bigger. Remove the height (or max height) and you'll avoid the vertical scrollbar.

...or as maybe I said, just didn't understood what is the desired effect.

0 讨论(0)
发布评论:

提交评论
- 加载中...

上一页 1 2

热议问题