CSS Prevent text from overflowing the parent div

Question

I have a description of a website HTML:

<div class="a_desc">
    <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean     commodo ligula eget dolor. Aenean massa. Cum sociis natoque 
</div>
<div>
  Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque </div><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque </div>
</div>

CSS:

.a_desc{
position: relative;
margin: 0.4em auto 0 auto;
background: rgba(27,27,25,0.7);
max-width: 500px;
padding:0.4em;
border-radius: 1em;
font-weight: 100;
max-height: 100%:
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
}
.a_desc > div{
margin-bottom: 0.5em;
line-height: 17px;
display: table;
}
.a_desc > div:last-child:after{
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

It works okay on android phone,but when i test it on iphone the text overflows the parent div:

How can that be prevented,How can i expand the parent to fit all of the text?

Answer 1

If you want to hide the overflowing text, use:

overflow: hidden;

Answer 2

No one gave me the right answer, so I kept trying and it turns out that it works if you simply set parent to display: table; and child to display: table-row;