Originally by @Artur-

Attachment added: ie8-inlineblocks.html (1.3 KiB)
Test demonstrating the issue

Originally by RalfN

Don't know, if it's helpful, but adding

.box:after {
content: "";
width: 100%;
display: inline-block;
}

removes some of the scrollbars. And FF and chrome don't complain about this.
(found with google)

greetings
Ralf

Originally by fcracker79

It may be trivial, but one might add the following:

padding-bottom: 0.3em;

to the container class and at least the bar disappears. Maybe it could be included only for Internet Explorer 8, even though this way users may notice different rendering results in IE compared to Firefox.

Originally by RalfN

Any updates on this one?
There were rumors about a fix in Vaadin 7...

Originally by @jouni

The new Valo theme currently works around this issue with the following main ingredients:

.v-widget {
  vertical-align: top;
}

.v-scrollable {
  overflow: auto;

  // "Unnecessary scrollbar" related fixes
  > .v-widget {
    // This is needed for IE
    vertical-align: middle;

    // Needed for all browsers. Can't really show anything outside the
    // scrolling area anyway, so we can safely hide any overflow
    overflow: hidden;
  }
}

So far it's looking good, no font-size: 0; or line-height: 0; hacks necessary. But I will not say it's bulletproof just yet. I'll wait for a larger beta test audience to tell me otherwise.

Originally by santeriv-profit

Jouni, thanks a lot for quick reaction, seems to solve vertical extra scrollbars on IE10 at least.

Here is how I used it with .css in Vaadin 7.2.0

.fix-panel-scrollbars .v-scrollable
{
  overflow: auto;
}

.fix-panel-scrollbars .v-scrollable .v-widget
{
	/* This is needed for IE */
    vertical-align: middle;
    /* Needed for all browsers. Can't really show anything outside the
    scrolling area anyway, so we can safely hide any overflow
    -/
    overflow: hidden;
}

I don't know if this style-fix needs MSIE-only-guard?

and in UI which implements ViewChangeListener

  @Override
  public void afterViewChange(ViewChangeEvent event) {
    fixInternetExplorerScrollbars();
  }

  protected void fixInternetExplorerScrollbars() {
    if(getPage().getWebBrowser().getBrowserApplication().contains("MSIE")) {
      contentVsFooter.addStyleName(FIX_PANEL_SCROLLBARS);
      notificationArea.addStyleName(FIX_PANEL_SCROLLBARS);
      HasComponents mainViewDisplay = (HasComponents) contentVsFooter.getFirstComponent(); 
      List<Panel> panelsInMainViewNow = VaadinTraverser.getChildrenByClass(mainViewDisplay, Panel.class);
      for (Panel panel : panelsInMainViewNow) {
        panel.addStyleName("fix-panel-scrollbars");
      }
    }
  }

Originally by @jouni

No need for any IE guards, the fix is applied to all browsers in Valo also. The issue affects all browsers, not just IE (at least in Valo to some degree), but for some reason it was only evident in IE with the older themes.

And do use the child combinator (>) in the selector, so that it only affects the direct child inside the scrollable element (and no need to re-apply overflow: auto;, that will come from the main theme). Otherwise all components will get the overflow: hidden; inside the panel, which might not be what you want.

I would say it's pretty safe to just make it into a global fix, but if you absolutely want to scope it with an additional style name, go ahead.

So I would just add this in your theme:

.v-widget {
  vertical-align: top;
}

.v-scrollable > .v-widget {
  vertical-align: middle;
  overflow: hidden;
}

Or if you prefer to scope it, then this:

.fix-panel-scrollbars {
  .v-widget {
    vertical-align: top;
  }

  .v-scrollable > .v-widget {
    vertical-align: middle;
    overflow: hidden;
  }
}

Closing as wontfix, as all old themes will be deprecated in version 8. You can use the documentation workarounds in this issue for your custom themes.