Openlayers, как обрабатывать карту, нажимать и рисовать одновременно проблемы

Ни одно из выпущенных решений не работает, когда вам нужно, чтобы нижний div прокручивался, когда содержимое слишком высокое. Вот решение, которое работает в этом случае:

HTML:

  

    
This is the header whose height is unknown
    
This is the header whose height is unknown
    
This is the header whose height is unknown
  
  

    

      

        

          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
        
      
    
  

CSS:

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.container {
  width: 400px;
  height: 300px;
}
.header {
  background: cyan;
}
.body {
  background: yellow;
  height: 100%;
}
.body-content-outer-wrapper {
  height: 100%;
}
.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}
.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Исходный источник: заполнение оставшейся высоты контейнера при обработке переполнения в CSS

Предварительный просмотр в реальном времени JSFiddle