html - 文字不会溢出 float div

我被最简单的事情困住了…我看不出哪里出了问题，也看不出为什么我的段落文本不会溢出按钮容器（位于包装的右下角）。
这里是js fiddle链接：http://jsfiddle.net/8q7cexL9/1/
与之配套的代码：
HTML格式

<div class="what-wrapper">
    <div class="what-box">
        <h1>What we do</h1>
        <p class="what-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quiss nosstrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute r in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p class="what-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mauis aute r in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. gna aliqua. Ut enim ad minim veniam, quiss nosst eu fugiat nulla parruduis aute r in reprehen eu arderit in voluptate velit.
        </p>
        <div class="button">Explore our facilities</div>
    </div>
</div>

CSS

.what-box {
    border: 1px solid #ededed;
    padding: 3%;
    width: 80%;
    position: relative;
    margin: 0 auto;
    border-radius: 15px;
    overflow: auto;
}

h1 {
    font-size:30px;
    color:red;
}

p.what-text {
    font-size: 13px;
    padding: 1% 0;
}

.button {
    font-size: 20px;
    color: #00396F;
    border: 1px solid;
    border-radius: 5px;
    padding: 2%;
    float: right;
}

谢谢你的帮助，
E.
E：因为看起来不够明显：
这就是我的目标。

最佳答案

您可以按此格式排列文本和图像

text text text  ------------
text text text  | button   |
text text text  |          |
text text text  ------------
text text text text text text
text ...

这是很好的格式。你可以查一下

http://jsfiddle.net/swapnilmotewar/4adprz48/