modal spans out of browser when browser sized too small

Question

I have a simple modal on my page, when I resize the browser it adjusts to its size, the problem is when the browsers say 'height' is over the modal element, the top bit seems to 'go out' of the browser, so essentially you cant see that bit part..

I experimented with setting the overflow and max-height on my #content-container and #wrapper but Its completely ineffective, what am I doing wrong?

jsfiddle: https://jsfiddle.net/kmav8ox7/

HTML:

<div id="content-container">
  <div id="wrapper">
    <ul id="flex-container">
      <li class="flex-item">
        <div id="list-area"></div>
      </li>
      <li class="flex-item">
        <div id="img-desc-container">
          <div class="image-area">
            <img src="http://dukes-lancaster.org/wp-content/uploads/2014/11/placeholder.jpg">
          </div>
          <div class="description-area"></div>
        </div>
      </li>
    </ul>
  </div>
</div>

CSS:

/* center content */

#content-container {
  width: 50%;
  height: 50%;
  border: 3px solid red;
  /* positioning */
  margin-top: 50vh;
  margin-left: 50vw;
  transform: translate(-50%, -50%);

  max-height: 100%;

}

/* wrapp content */

#wrapper {
  width: 100%;
  height: 100%;
   max-height: 100%;
  margin: 0;
  /*Centering content*/
  display: inline-flex;
  justify-content: center;
  align-items: content;
}

#img-desc-container {
  display: flex;
  flex-direction: column;
}

/*  MULTI ELEMENT */

.image-area,
.description-area {
  width: 200px;
  height: 125px;
  border: 1px solid black;
}

.image-area,
.description-area,
#list-area {
  box-sizing: border-box;
  margin: 10px;
}

/* LIST AREA */

#list-area {
  width: 200px;
  height: 250px;
  border: 1px solid black;
  background-color: #22AED1;
  float: left;
}

/* IMG AREA */

.image-area {
  background-color: #016FB9;
}

.image-area img {
  width: 100%;
  height: 100%;
}

/* DESC AREA */

.description-area {
  background-color: #AFA98D;
  height: 105px;
}

/*FLEX CONTAINER */

#flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

Answer 1

In order to make it Responsive, You must avoid using Pixels to provide height or width. U can Give Height in Percentage (for eg. 100% for maximum), then it will never get out of the page

Answer 2

This may help you. You need to change some css of #content-container. change translate(-50%, 50%) to translate(-50%, 0%) and remove margin-top

/* center content */
body {
   display: flex;
   align-items: center;
   min-height: 100vh;
}
#content-container {
    width: 50%;
    height: 50%;
    border: 3px solid red;
    margin-left: 50vw;
    transform: translate(-50%, 0%);
}

/* wrapp content */

#wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  /*Centering content*/
  display: inline-flex;
  justify-content: center;
  align-items: content;
}

#img-desc-container {
  display: flex;
  flex-direction: column;
}

/*  MULTI ELEMENT */

.image-area,
.description-area {
  width: 200px;
  height: 125px;
  border: 1px solid black;
}

.image-area,
.description-area,
#list-area {
  box-sizing: border-box;
  margin: 10px;
}

/* LIST AREA */

#list-area {
  width: 200px;
  height: 250px;
  border: 1px solid black;
  background-color: #22AED1;
  float: left;
}

/* IMG AREA */

.image-area {
  background-color: #016FB9;
}

.image-area img {
  width: 100%;
  height: 100%;
}

/* DESC AREA */

.description-area {
  background-color: #AFA98D;
  height: 105px;
}

/*FLEX CONTAINER */

#flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

<div id="content-container">
  <div id="wrapper">
    <ul id="flex-container">
      <li class="flex-item">
        <div id="list-area"></div>
      </li>
      <li class="flex-item">
        <div id="img-desc-container">
          <div class="image-area">
            <img src="http://dukes-lancaster.org/wp-content/uploads/2014/11/placeholder.jpg">
          </div>
          <div class="description-area"></div>
        </div>
      </li>
    </ul>
  </div>
</div>

Answer 3

I think you can use this css code for solution.

#content-container {
    width: 50%;
    height: 50%;
    border: 3px solid red;
    margin-top: 0;
    margin-left: 50vw;
    transform: translate(-50%, 0%);
}
#wrapper {
    width: 100%;
    height: 94vh;
    margin: 0;
    display: inline-flex;
    justify-content: center;
    align-items: content;
    overflow: auto;
}