当子div溢出时，在父div中包装子div文本

Question

Codepen：http://codepen.io/anon/pen/qaVRqw

我试图让innerDiv在文本超出父div之前包装文本。如何让所有文本显示在innerDiv中，同时也包装好？

我尝试过使用以下内容，但它们并不是我想要的：

overflow-wrap: normal;
overflow-wrap: break-word;

我无法弄清楚如何Google这个问题。我猜是否应该添加某种负面填充或边距？

我已经搞乱了innerDiv的宽度，但当我改变位置时，它会超出父级，除非我溢出，但内容就会消失。

编辑：更改了标题，因为我记不知道我提交的最后一个问题

Answer 1

很多复杂的答案，但实际上它是左边的150px导致它爆发，所以取消它的右边距...

#innerDiv {
    position: relative;
    left: 150px;
    margin-right: 150px; /* add this */
    background: pink;
}

Answer 2

尝试设置＆＃39; max-width＆＃39;在内部div。这将强制文本以您选择的宽度换行。

E.g。

#innerDiv {
  max-width: 200px;
}

Answer 3

如何将max-width添加到#innerDiv？在你的例子中

#innerDiv {
    position: relative;
    left: 150px;
    max-width: calc(100% - 150px);
    background: pink;
}

会做到这一点。

Answer 4

将此代码添加到innerDiv，使其适合outerDiv，无论宽度如何。

width: calc(100% - 150px);

（用左/右偏移量取代150Dx取决于innerDiv）

Answer 5

position: relative;
left: 100px;
background: pink;
/* width: 700px; */
width: calc(100% - 100px);