     else
       css.left  = left + leftDelta
 
+    # update dropbox position and css class depending on the type
     dropbox
       .css css
       .toggleClass 'Dropup', type is 'dropup'
       .toggleClass 'Dropdown', type is 'dropdown'
+
+    # update scrollable container height
+    # if dropbox doesn't fit the window height
+    scrollHeight = if heightDelta > 0 then scrollHeight - heightDelta else 'auto'
+    scrollable.css { height : scrollHeight }
 
 
   render: ->

    { width, height, top, left } = @inputDimensions

    dropbox       = $ React.findDOMNode @refs.dropbox
    dropboxHeight = dropbox.height()
    winHeight     = $(window).height()
    winWidth      = $(window).width()
    if type is 'dropup'
      type = 'dropdown'  if top - dropboxHeight < 0
    else
      type = 'dropup'  if top + height + dropboxHeight > winHeight

    css = { width, top : 'auto', bottom : 'auto' }
    if type is 'dropup'
      css.bottom = winHeight - top
    else
      css.top    = top + height

    rightDelta = @props.right
    leftDelta  = @props.left
    if rightDelta?

Dropbox = require './dropboxbody'

module.exports = class PortalDropbox extends React.Component

  MIN_HEIGHT = 100

  @defaultProps =
    left : 0
