# Box style category dropdown on Chrome always forces scrollbar

**URL:** <https://meta.discourse.org/t/box-style-category-dropdown-on-chrome-always-forces-scrollbar/40309>\
**Category:** UX\
**Created:** [Février 29, 2016, 2:09 UTC](https://meta.discourse.org/t/box-style-category-dropdown-on-chrome-always-forces-scrollbar/40309 "2016-02-29T02:09:49Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [Février 29, 2016, 4:36 UTC](https://meta.discourse.org/t/box-style-category-dropdown-on-chrome-always-forces-scrollbar/40309/2 "2016-02-29T04:36:16Z")

</div>

Thanks to Stack Overflow:

> <https://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward/9289377#9289377>

Here’s what’s causing the problem:

> The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

Changing .badge-wrapper.box span from `overflow: hidden;` to `overflow: visible;` fixes it.

Edit: Setting `vertical-align: text-top` on the `.category-dropdown-menu badge-wrapper.box` link accomplishes the same thing, but would allow you to set a max-width on the category name span and have the name truncated with ellipsis. (there’s currently no max-width on the menu’s box-style category span.)

---

_[View the full topic](https://meta.discourse.org/t/box-style-category-dropdown-on-chrome-always-forces-scrollbar/40309)._