CSS定位：将文本包装在模态中

Question

关于CSS的一个相对（我希望）的简单问题，我显然没有得到。

我的页面上有一个模式，其中包含以下样式定义：

.modal
{
    position: fixed;
    width: 86% !important;
    left: 7% !important;
    height: 86% !important;
    top: 3% !important;  
    background-color: #ffffff;
    border-radius: 5px;
    text-align: left;
    margin: 10px;
    padding: 10px;
    z-index: 10000;
}

在模态中我希望有4个项目：
 1）左手侧的图像，按比例调整大小到模态的高度
 2）图像右侧的文本框
 3）另一个文本框，也在图像的右侧，在第一个文本框下面  4）右上角的“关闭”按钮

这是模拟：

我的问题是，当文本2的内容超出模态的末尾而不是文本换行时，它会将整个文本框移动到模态下方，从而使其实际上不可见。

我需要允许文本1和文本2中的文本换行，尤其是在文本2中。

以下是推动此操作的HTML代码：

<div id="modal" class="modal" style="visibility: hidden;">
  <img align="middle" class="modalImg" id="modalImg" />
  <span style="float:left;">
    <h2 id="textBox1"></h2>
    <br/>
    <h3 id="textBox2"></h3>
    <img id="close" src="images/css/close.png" />
</div>

相关的css样式：

.modalImg
{
    height: 100%; width:auto;
    margin: 0px 25px 0px 0px;
    float: left;
}

.modal #close
{
    position: absolute;
    top: 5px;
    right: 5px;
}

h2 {
    color:#384D73;
    font-size:20px;
    margin:20px 0 10px 0;
    clear:both;
}

h3 {
    color:#384D73;
    font-size:18px;
    margin:20px 0 5px 0;
    clear:both;
    line-height: 125%;
}

任何人都可以帮我正确配置吗？提前谢谢！

Answer 1

你在找这样的东西吗？

Demo

body {
background:#ccc;
}

* {
box-sizing: border-box;
}

.modal {
    position: fixed;
    width: 80%;
    left: 10%;
    height: 80%;
    top: 10%;
    background-color: #fff;
    border-radius: 3px;
    margin: 10px;
    padding: 10px;
    z-index: 10000;
}

.modal-close {
    position:absolute;
    top:-10px;
    right:-10px;
    width:20px;
    height:20px;
    background:#333;
    border-radius:50%;
}

.modal-image {
    position:absolute;
    top:5%;
    bottom:5%;
    left:5%;
    width:45%;
    background: url('http://annerileybooks.com/wp-content/uploads/2012/03/Force-Field-LOLCat.jpg') left top no-repeat;
    background-size:contain;
}

.modal-content {
    overflow-x:hidden;
    overflow-y:auto;
    position:absolute;
    top:5%;
    bottom:5%;
    right:5%;
    width:45%;
}

Answer 2

进行溢出：滚动text2