html - 模态弹出窗口溢出

Question

我正在尝试在模态弹出窗口中创建一个溢出。溢出应该只用于水平滚动。但是文本跨越了弹出模式的高度。 这是codepen的链接 http://codepen.io/anon/pen/AKqJf

CSS:

html,body {margin:0; padding:10px; -webkit-backface-visibility:hidden;}
img {width:100%;}
/* text-based popup styling */
.white-popup {
  position: relative;
  background: #FFF;
  padding: 25px;
  width:auto;
  max-width: 400px;
  height: 20px;
  overflow-y:scroll;
  margin: 0 auto; 

}





/* 

====== Zoom effect ======

*/
.zoom-in {

  /* start state */
  .anim {
    opacity: 0;
    transition: all 0.2s ease-in-out; 
    transform: scale(0.8); 
  }

  &.mfp-bg {
    opacity: 0;
      transition: all 0.3s ease-out;
  }

  /* animate in */
  &.mfp-ready {
    .anim {
      opacity: 1;
      transform: scale(1); 
    }
    &.mfp-bg {
      opacity: 0.8;
    }
  }

  /* animate out */
  &.mfp-removing {

    .anim {
      transform: scale(0.8); 
      opacity: 0;
    }
    &.mfp-bg {
      opacity: 0;
    }

  }

}

谢谢

Answer 1

我没有完全理解你的问题，但检查一下

.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width:auto;
max-width: 400px;
height: 100px;
overflow-y:scroll;
margin-top:100px; 
}