chrome, overflow: auto shows horizontal scroll bar whenever vertical scroll bar is shown

I have a situation where i use max-width and max-height, whenever inner-content crosses max-height vertical scroll bar should be shown and whenever inner content crosses max-width horizontal scroll bar should be shown.

In the below scenario, horizontal scroll bar is shown whenever a vertical scrollbar appears even when inner content does not cross max-width.

I tried using different box-sizing value since it looks like the vertical scroll bar takes up part of the width making horizontal scroll bar appear, still it did not help.

.p {
  position: absolute;
  max-width: 200px;
  max-height: 400px;
  overflow: auto;
  border: 1px solid red;
}

.c {
  position: relative; 
  height: 500px;
  border: 1px solid blue;
}



<div class="p">
    <div class="c">
      vhjjujfhjsdfd
    </div>
  </div>

JSBIN