     { width, height, top, left } = @inputDimensions
 
     dropbox       = $ React.findDOMNode @refs.dropbox
+    scrollable    = dropbox.find '.Dropbox-scrollable'
+
+    # reset scrollable height before calculations
+    # to have initial dropbox height
+    scrollable.css { height : 'auto' }
+
+    scrollHeight  = scrollable.height()
     dropboxHeight = dropbox.height()
     winHeight     = $(window).height()
     winWidth      = $(window).width()
+
+    # check if dropbox is too close to window border
+    # and therefore type should be changed to reverse
     if type is 'dropup'
-      type = 'dropdown'  if top - dropboxHeight < 0
+      type = 'dropdown'  if top < MIN_HEIGHT
     else
-      type = 'dropup'  if top + height + dropboxHeight > winHeight
+      type = 'dropup'  if top + height + MIN_HEIGHT > winHeight
 
+    # calculate vertical coordinates of dropbox
+    # and height delta if it doesn't fit the window height
     css = { width, top : 'auto', bottom : 'auto' }
     if type is 'dropup'
-      css.bottom = winHeight - top
+      css.bottom  = winHeight - top
+      heightDelta = dropboxHeight - top
     else
-      css.top    = top + height
+      css.top     = top + height
+      heightDelta = css.top + dropboxHeight - winHeight
 
+    # calculate horizontal coordinates
     rightDelta = @props.right
     leftDelta  = @props.left
     if rightDelta?

    else
      css.left  = left + leftDelta

    dropbox
      .css css
      .toggleClass 'Dropup', type is 'dropup'
      .toggleClass 'Dropdown', type is 'dropdown'


  render: ->

Dropbox = require './dropboxbody'

module.exports = class PortalDropbox extends React.Component

  MIN_HEIGHT = 100

  @defaultProps =
    left : 0
