html - 当浏览器尺寸太小时模态跨越浏览器

Question

我的页面上有一个简单的模式，当我调整浏览器大小时它会调整到它的大小，问题是当浏览器说“高度”超过模式元素时，顶部位似乎“走出”浏览器，所以基本上你看不到那部分..

我尝试在我的 #content-container 和 #wrapper 上设置 overflow 和 max-height但它完全无效，我做错了什么？

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

这可能对您有所帮助。 您需要更改 #content-container 的一些 css。将 translate(-50%, 50%) 更改为 translate(-50%, 0%) 并移除 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>