On my website, the Lorem Ipsum text overflows the container. How can I automatically add a line break when the text reaches its container's borders.

I have created **[this JSFiddle](http://jsfiddle.net/danielr1996/3dmdxd9q/)** to demonstrate my issue.

**HTML:**

```
<body>
    <div id="wrapper">
        <div id="content">      
            <div class="flex">
                <div class="flexchild">
                    <img src="img.jpg" width="200"></img>
                </div>
                <div class="flexchild">
                    <p>
                       Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

```

**CSS**

```
body,html {
  background: #fff;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}

#wrapper{
  background: #ccc;
  height: 100%;
}

.flex {
  width: 100%;
  height: 340px;
  display: -webkit-box;
  display: flex;
}

.flexchild {
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  overflow: auto;
  display: block;
}

```