2

We've a problem in a website with Microsoft Edge. Some vertical scrollbars are visible in the .ic3-report-content-container. Check website here

The CSS is:

.ic3-report-content-container {
    height: 100%;
    overflow:auto;
}

How is it possible that, with a height of 100%, Edge is showing a vertical overflow?

The containers div - parent .ic3-report-editor - has the correct height. Somehow the height of this div is smaller (no borders, no padding, no margins...)

Removing the overflow or putting overflow-x:auto; and overflow-y:hidden; fixes the issue. Is this normal, or an Edge bug?

TylerH
  • 20,799
  • 66
  • 75
  • 101
ic3
  • 7,917
  • 14
  • 67
  • 115
  • If the element has padding and/or margin set, they will add to the element's height, unless you use `box-sizing: border-box;` – Lucian Aug 04 '15 at 07:53
  • Please include enough code in your question to reproduce the problem, rather than linking to an external site. – TylerH Aug 04 '15 at 14:48

1 Answers1

0

The inner content of the div.ic3-report-content-container exceeds the boundaries of the box, so simply add:

.ic3-report-content-container {overflow: hidden;}

to get rid of the scroll.

Giacomo Paita
  • 1,411
  • 2
  • 12
  • 21
  • That's a bit of a hack, the question is why ic3-report-content-container has not the same height as ic3-report-editor even though the height is set to 100% – ic3 Aug 04 '15 at 09:30
  • Normally, you can't set the 100% height, see here http://stackoverflow.com/questions/6158975/css-100-height-layout – Giacomo Paita Aug 04 '15 at 09:45
  • Not sure to follow up, it's working an Chrome, Firefox, Safari, IE10.. it's just a problem we got with Edge – ic3 Aug 04 '15 at 11:45