title: Window content size not affected by Window min -height -width
body: <p>I'm developing a web application using the Vaadin framework. I have a small problem with modal windows and their content though. As explained in the pictures below:</p>
  
  <p><img src="https://i.stack.imgur.com/pxZnS.png" alt="Before I start resizing"></p>
  
  <p><img src="https://i.stack.imgur.com/BBTIs.png" alt="While making the modal window smaller"></p>
  
  <p>This is my CSS:</p>
  
  <pre><code>.inventory-switchsubscription-modal-window {
      min-height: 290px;
      min-width: 1060px;
  }
  </code></pre>
  
  <p>Ok, so as you see the window that I have specified in CSS to have a min-height and a min-width is not affected by the resizing, but its content is! Does anyone know of a Window CSS parameter or some other trick I can use to make the CONTENT of the modal window "listen" to the CSS specifications of the window and not resize too small?</p>
  
  <p>Thank you!</p>
  
  <p>Edit: Here's the generated markup and the CSS provided by the Vaadin theme.</p>
  
  <pre><code>    &lt;div class="v-window v-window-inventory-switchsubscription-modal-window inventory-switchsubscription-modal-window" style="margin-left: 0px; margin-top: 0px; left: 429px; top: 365px; z-index: 10001; visibility: visible; position: absolute; overflow: visible; width: 1056px;"&gt;
       &lt;div class="popupContent"&gt;
        &lt;div class="v-window-wrap" style=""&gt;
         &lt;div class="v-window-wrap2" style=""&gt;
          &lt;div id="PID240_window_close" class="v-window-closebox"&gt;&lt;/div&gt;
          &lt;div class="v-window-outerheader"&gt;
           &lt;div class="v-window-header"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="v-window-contents" style=""&gt;
           &lt;div tabindex="0" style="overflow: auto; position: relative;"&gt;
            &lt;div class="v-verticallayout" style="overflow: hidden; width: 1052px; height: 274px;"&gt;
             &lt;div style="overflow: hidden; margin: 12px; width: 1028px; height: 250px;"&gt;
              &lt;div style="height: 218px; width: 1028px; overflow: hidden; padding-left: 0px; padding-top: 0px;"&gt;
               &lt;div style="float: left; margin-left: 0px;"&gt;
                &lt;div class="v-panel v-panel-black-panel black-panel" style="overflow: hidden; width: 1028px;"&gt;
                 &lt;div class="v-panel-captionwrap"&gt;
                  &lt;div class="v-panel-caption v-panel-caption-black-panel" style=""&gt;
                   &lt;span&gt;Manage SIM Card Subscriptions&lt;/span&gt;
                  &lt;/div&gt;
                 &lt;/div&gt;
                 &lt;div class="v-panel-content v-panel-content-black-panel" tabindex="-1" style="overflow: auto; position: relative;"&gt;
                  &lt;div class="v-verticallayout" style="overflow: hidden; width: 1026px; height: 184px;"&gt;
                   &lt;div style="overflow: hidden; margin: 0px; width: 1026px; height: 184px;"&gt;
                    &lt;div style="height: 67px; width: 1026px; overflow: hidden; padding-left: 0px; padding-top: 0px;"&gt;
                     &lt;div style="float: left; margin-left: 0px;"&gt;
                      &lt;div class="v-horizontallayout" style="overflow: hidden; width: 1026px; height: 67px;"&gt;
                       &lt;div style="overflow: hidden; margin: 0px; width: 1026px; height: 67px;"&gt;
                        &lt;div style="height: 67px; width: 1026px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;"&gt;
                         &lt;div style="float: left; margin-left: 1px;"&gt;
                          &lt;div class="v-horizontallayout v-horizontallayout-m2m-popup-inner-panel-layout m2m-popup-inner-panel-layout" style="overflow: hidden; width: 974px; height: 17px;"&gt;
                           &lt;div style="overflow: hidden; margin: 0px; width: 1000px; height: 17px;"&gt;
                            &lt;div style="height: 17px; width: 497px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;"&gt;
                             &lt;div style="float: left; margin-left: 0px;"&gt;
                              &lt;div class="v-label" style="width: 497px;"&gt;SIM Card (Chip Id): 1&lt;/div&gt;
                             &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div style="height: 17px; width: 497px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;"&gt;
                             &lt;div style="float: left; margin-left: 0px;"&gt;
                              &lt;div class="v-label" style="width: 497px;"&gt;Customer: Max Hamburgare&lt;/div&gt;
                             &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div style="width: 0px; height: 0px; clear: both; overflow: hidden;"&gt;&lt;/div&gt;
                           &lt;/div&gt;
                          &lt;/div&gt;
                         &lt;/div&gt;
                        &lt;/div&gt;
                         &lt;div style="width: 0px; height: 0px; clear: both; overflow: hidden;"&gt;&lt;/div&gt;
                       &lt;/div&gt;
                      &lt;/div&gt;
                     &lt;/div&gt;
                    &lt;/div&gt;
                     &lt;div style="height: 117px; width: 1026px; overflow: hidden; padding-left: 0pt; padding-top: 0px;"&gt;
                      &lt;div style="float: left; margin-left: 0px;"&gt;
                       &lt;div class="v-verticallayout v-verticallayout-inventory-switchsububscription-panel inventory-switchsububscription-panel" style="overflow: hidden; width: 1026px; height: 105px;"&gt;
                        &lt;div style="overflow: hidden; margin: 0px; width: 1026px; height: 105px;"&gt;
                         &lt;div style="height: 105px; width: 1026px; overflow: hidden; padding-left: 0px; padding-top: 0px;"&gt;
                          &lt;div style="float: left; margin-left: 26px;"&gt;
                           &lt;div class="v-table v-table-v-table-striped v-table-striped" style="width: 974px;"&gt;
                            &lt;div class="v-table-header-wrap" style="width: 972px;"&gt;
                             &lt;div class="v-table-header" style="overflow: hidden;"&gt;
                              &lt;div style="width: 900000px;"&gt;
                               &lt;table&gt;
                                &lt;tbody&gt;
                                 &lt;tr&gt;
                                  &lt;td class="v-table-header-cell" style="width: 168px;"&gt;
                                  &lt;td class="v-table-header-cell" style="width: 140px;"&gt;
                                  &lt;td style="width: 168px;"&gt;
                                  &lt;td style="width: 166px;"&gt;
                                  &lt;td class="v-table-header-cell" style="width: 179px;"&gt;
                                  &lt;td class="v-table-header-cell" style="width: 148px;"&gt;
                                 &lt;/tr&gt;
                                &lt;/tbody&gt;
                               &lt;/table&gt;
                              &lt;/div&gt;
                             &lt;/div&gt;
                             &lt;div class="v-table-column-selector" style="display: none;"&gt;&lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="v-table-body" tabindex="-1" style="overflow: auto; position: relative; width: 972px; height: 85px;"&gt;
                             &lt;div class="v-table-body-noselection" style="height: 68px;"&gt;
                              &lt;div class="v-table-row-spacer" style="height: 0px;"&gt;&lt;/div&gt;
                              &lt;table class="v-table-table"&gt;
                               &lt;tbody&gt;
                                &lt;tr class="v-table-row" style=""&gt;
                                 &lt;td class="v-table-cell-content" style="width: 155px;"&gt;
                                 &lt;td class="v-table-cell-content" style="width: 127px;"&gt;
                                 &lt;td class="v-table-cell-content" style="width: 155px;"&gt;
                                 &lt;td class="v-table-cell-content" style="width: 153px;"&gt;
                                 &lt;td class="v-table-cell-content" style="width: 166px;"&gt;
                                 &lt;td class="v-table-cell-content" style="width: 135px;"&gt;
                                &lt;/tr&gt;
                                &lt;tr class="v-table-row-odd" style=""&gt;
                                &lt;tr class="v-table-row" style=""&gt;
                                &lt;tr class="v-table-row-odd" style=""&gt;
                               &lt;/tbody&gt;
                              &lt;/table&gt;
                              &lt;div class="v-table-row-spacer" style="height: 0px;"&gt;&lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div tabindex="-1" style="position: fixed; top: 0px; left: 0px;"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="v-table-footer-wrap" style="display: none; width: 972px;"&gt;
                           &lt;div class="v-table-footer" style="overflow: hidden;"&gt;
                            &lt;div style="width: 900000px;"&gt;
                             &lt;table&gt;
                              &lt;tbody&gt;
                               &lt;tr&gt;
                                &lt;td style="width: 167px;"&gt;
                                &lt;td style="width: 139px;"&gt;
                                &lt;td style="width: 167px;"&gt;
                                &lt;td style="width: 165px;"&gt;
                                &lt;td style="width: 178px;"&gt;
                                &lt;td style="width: 147px;"&gt;
                               &lt;/tr&gt;
                              &lt;/tbody&gt;
                             &lt;/table&gt;
                            &lt;/div&gt;
                           &lt;/div&gt;
                          &lt;/div&gt;
                         &lt;/div&gt;
                        &lt;/div&gt;
                       &lt;/div&gt;
                       &lt;div style="width: 0px; height: 0px; clear: both; overflow: hidden;"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                     &lt;/div&gt;
                    &lt;/div&gt;
                   &lt;/div&gt;
                   &lt;div style="width: 0px; height: 0px; clear: both; overflow: hidden;"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                 &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="v-panel-deco v-panel-deco-black-panel"&gt;&lt;/div&gt;
               &lt;/div&gt;
              &lt;/div&gt;
             &lt;/div&gt;
             &lt;div style="height: 32px; width: 1028px; overflow: hidden; padding-left: 0pt; padding-top: 0px;"&gt;
              &lt;div style="float: left; margin-left: 0px;"&gt;
               &lt;div class="v-horizontallayout v-horizontallayout-m2m-modal-window-button-position m2m-modal-window-button-position" style="overflow: hidden; width: 1028px; height: 26px;"&gt;
                &lt;div style="overflow: hidden; margin: 0px; width: 1054px; height: 26px;"&gt;
                 &lt;div style="height: 26px; width: 1054px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;"&gt;
                  &lt;div style="float: left; margin-left: 854px;"&gt;
                   &lt;div class="v-horizontallayout v-horizontallayout-inventory-imsi-table-positioning-B inventory-imsi-table-positioning-B" style="overflow: hidden; width: 158px; height: 26px;"&gt;
                    &lt;div style="overflow: hidden; margin: 0px; width: 200px; height: 26px;"&gt;
                     &lt;div style="height: 26px; width: 86px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;"&gt;
                      &lt;div style="float: left; margin-left: 0px;"&gt;
                       &lt;div class="v-button" tabindex="0" role="button"&gt;
                        &lt;span class="v-button-wrap"&gt;
                         &lt;span class="v-button-caption"&gt;OK&lt;/span&gt;
                        &lt;/span&gt;
                       &lt;/div&gt;
                      &lt;/div&gt;
                     &lt;/div&gt;
                     &lt;div style="height: 26px; width: 108px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;"&gt;
                      &lt;div style="float: left; margin-left: 0px;"&gt;
                       &lt;div class="v-button" tabindex="0" role="button"&gt;
                        &lt;span class="v-button-wrap"&gt;
                         &lt;span class="v-button-caption"&gt;Cancel&lt;/span&gt;
                        &lt;/span&gt;
                       &lt;/div&gt;
                      &lt;/div&gt;
                     &lt;/div&gt;
                     &lt;div style="width: 0px; height: 0px; clear: both; overflow: hidden;"&gt;&lt;/div&gt;
                   &lt;/div&gt;
                  &lt;/div&gt;
                 &lt;/div&gt;
                &lt;/div&gt;
                &lt;div style="width: 0px; height: 0px; clear: both; overflow: hidden;"&gt;&lt;/div&gt;
               &lt;/div&gt;
              &lt;/div&gt;
             &lt;/div&gt;
            &lt;/div&gt;
            &lt;div style="width: 0px; height: 0px; clear: both; overflow: hidden;"&gt;&lt;/div&gt;
           &lt;/div&gt;
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="v-window-footer"&gt;
         &lt;div class="v-window-resizebox"&gt;&lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>element.style {
      left: 429px;
      margin-left: 0;
      margin-top: 0;
      overflow: visible;
      position: absolute;
      top: 365px;
      visibility: visible;
      width: 1056px;
      z-index: 10001;
  }
  .inventory-switchsubscription-modal-window, .v-window-contents {
      min-height: 290px;
      min-width: 1060px;
  }
  styles.css (rad 299)
  .v-window {
      background-image: none;
  }
  window.css (rad 26)
  .v-window, .v-popupview-popup, .v-filterselect-suggestpopup, .v-datefield-popup, .v-contextmenu, .v-Notification, .v-menubar-submenu {
      background: url("../atlas/img/grad-light-top.png") repeat-x scroll 0 0 rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(0, 0, 0, 0.4);
      border-radius: 4px 4px 4px 4px;
      overflow: hidden;
  }
  common.css (rad 57)
  .v-app, .v-window, .v-popupview-popup, .v-tooltip, .v-app input, .v-app select, .v-app button, .v-app textarea, .v-window input, .v-window select, .v-window button, .v-window textarea, .v-popupview-popup input, .v-popupview-popup select, .v-popupview-popup button, .v-popupview-popup textarea, .v-filterselect-suggestpopup, .v-datefield-popup, .v-contextmenu, .v-Notification, .v-menubar-submenu, .v-table-header-drag, .v-menubar-submenu, .v-drag-element {
      color: #666666;
      font-family: Verdana,Arial,sans-serif;
      font-size: 12px;
      line-height: 1.4;
  }
  common.css (rad 46)
  .v-window {
      background: none repeat scroll 0 0 #FFFFFF;
  }
  styles.css (rad 2160)
  .v-app, .v-window, .v-popupview-popup, .v-label, .v-caption {
      cursor: default;
  }
  styles.css (rad 273)
  Inherited from body.v-generated-body
  body {
      color: #666666;
      font-family: Verdana,Arial,sans-serif;
      font-size: 12px;
      line-height: 1.4;
  }
  </code></pre>