StackOverflow - Add a gap between jstree nodes text and scrollbars

http://stackoverflow.com/questions/37158758/add-a-gap-between-jstree-nodes-text-and-scrollbars/37280709#37280709

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<div class="wrap">
	<div class="clearfix"></div>
	<div id="jstree"></div>
</div>

CSS

.wrap {
	position: relative;
	visibility: hidden;
	border:solid; 
	overflow: auto;
	margin: 0 auto;
}

.wrap.ready {
	visibility: visible;
}

.wrap .clearfix {
	width: 1px;
	height: 1px;
	position: absolute;
  top: 0;
	left: 0;
  z-index: -1;
}

.jstree {
	padding: 20px;
	display: inline-block;
	overflow: hidden;
}

.jstree-children,
.jstree-node,
.jstree-anchor {
	width: 100%;
	box-sizing: border-box;
}

.jstree-children:not(.jstree-container-ul) .jstree-node {
	padding-left: 24px;
	margin-left: 0;
}

.jstree-anchor {
    display: inline-block;
    white-space: nowrap;
	word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
}

JavaScript

var resizeWrap = function() {
	var viewport = 250,
  		scroll = {
			x: 0,
			y: 0
		},
		fix = 60,
		scrollbars = 15;
		
	if (typeof this.size === 'undefined') {
		this.size = {
			width: $('#jstree').outerWidth(),
			height: $('#jstree').outerHeight()
		};

		$('.wrap .clearfix')
			.css('width', this.size.width + 'px')
			.css('height', this.size.height + 'px');

		fix += (this.size.height > viewport) ? scrollbars : 0;
    
	    $('#jstree').width(viewport - fix);
		$('#jstree').height(viewport - fix);
	}
	
	$('.wrap')
		.width(viewport)
		.height(viewport)
		.addClass('ready');
	
	$('.wrap').scroll(function() {
		current = {
			x: $(this).scrollLeft(),
			y: $(this).scrollTop()
		};
		
		if (current.x !== scroll.x)
			$('#jstree').width(viewport + current.x - fix);
		
		if (current.y !== scroll.y)
			$('#jstree').height(viewport + current.y - fix);
		
		scroll = current;
	});
}


$( document ).ready(function() {
  $('#jstree').jstree({
		'core' : {
			'data' : [{
        'text' : 'veryveryveryveryveryverylong', 
        'state' : { 'opened' : true },
        'children' : [{
          'text' : 'veryveryveryveryveryverylong', 
          'state' : { 'opened' : true },
          'children' : [{
            'text' : 'veryveryveryveryveryverylong', 
            'state' : { 'opened' : true },
            'children' : [{
              'text' : 'veryveryveryveryveryverylong', 
              'state' : { 'opened' : true },
              'children' : [{
                'text' : 'veryveryveryveryveryverylong', 
                'state' : { 'opened' : true },
                'children' : [{
                  'text' : 'veryveryveryveryveryverylong', 
                  'state' : { 'opened' : true },
                  'children' : [{
                    'text' : 'veryveryveryveryveryverylong', 
                    'state' : { 'opened' : true },
                    'children' : [{
                      'text' : 'veryveryveryveryveryverylong', 
                      'state' : {...