overflow in the fancybox-inner class

There is a block - in the picture. near the field a block pops up with an error if it is.

The problem is that by default the fancybox-inner class fancybox-inner value of the overflow property of auto and so it turns out that when an error pops up the block with an error is truncated.

I changed the value to inherit everything is visible. But now if the window is small, it is shown as the first photo.

Tell me how to fix it?

HTML forms:

 <div id="edit-category-form" class="form no-trans"> <h1>Edit/Remove</h1> <div class="form-block category-status clearfix"> <input type="text" id="new" placeholder="Category" class="form-control"/> <input type="hidden" id="old" /> <i class="fa fa-tag no-trans" aria-hidden="true"></i> <div class="error-tooltip clearfix"> <ul class="error-main"></ul> </div> </div> <div class="form-block clearfix"> <button id="remove-category-btn"><i class="fa fa-trash-o" aria-hidden="true"></i>Remove</button> <button id="edit-category-btn"><i class="fa fa-floppy-o" aria-hidden="true"></i>Save</button> </div> </div> 

CSS forms:

 div.form { width: 350px; padding: 40px 24px; background: #eee; display: none; z-index: 60; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; } div.form h1 { color: #ccc; font-size: 50px; font-weight: 400; text-align: center; margin: 0 0 10px 0; } input.form-control{ width: 100%; height: 46px; padding: 5px 7px 5px 25px; background: #fff; color: #666; line-height: 28px; font-size: 18px; border: 2px solid #ddd; } div.form-block { width: 100%; position: relative; margin-bottom: 8px; } div.form-block i.fa { top: 15px; left: 9px; position: absolute; } div.form-block.confirm { margin: 20px 0 0 0; } div.form-block ul.error-main { line-height: 32px; } div.form-block input.form-control:focus, div.form-block input.form-control:focus + i.fa, div.form-block textarea.form-control:focus { border-color: #10CE88; color: #10CE88; } div.form-block.wrong-entry { -moz-animation: wrong-log 0.3s; -webkit-animation: wrong-log 0.3s; animation: wrong-log 0.3s; } .wrong-entry .form-control + .fa, div.form-block.wrong-entry .form-control{ border-color: #ed1c24; color: #ed1c24; } div.form-block.req p { width: 100%; text-align: left; font-size: 12px; color: #989898; } textarea.form-control { width: 95%; height: 50px; padding: 5px 7px 5px 30px; background: #fff; color: #666; font-size: 18px; border: 2px solid #ddd; font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } input.form-control:focus, input.form-control:focus + .fa, input.form-control:focus + .fa-envelope-o { border-color: #10CE88; color: #10CE88; } div[class$="status"] .fa { position: absolute; left: 11px; top: 14px; color: #999; } .form-block span.req { height: 46px; float: right; margin: 0 0 0 5px; } div.form-block.wrong-entry, div.user-policy.wrong-entry label { -moz-animation: wrong-log 0.3s; -webkit-animation: wrong-log 0.3s; animation: wrong-log 0.3s; } .wrong-entry .form-control + .fa, div.form-block.wrong-entry .form-control { border-color: #ed1c24; color: #ed1c24; } div.error-tooltip { width: 100%; top: 0; right: 101%; display: block; z-index: 1000; opacity: 0; padding: 7px 0 7px 5px; line-height: 46px; font-size: 12px; position: absolute; } div.error-tooltip:after { left: 100%; top: 50%; /*border: solid transparent;*/ content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-left-color: #ed1c24; border-width: 5px; margin-top: -5px; } div.error-top:after { top: 18%; } ul.error-main { color: #FFF; text-align: center; background: #EC3940; line-height: 40px; } ul.error-main li.error-li{ line-height: 24px; }