Height of the css box should be set dynamically-CodePudding

I want to create a div of max width 200px; how can i auto increase the height in my div? can some help me which css properties should i use ?

my use case is my width of box should be constant but the text i keep in the box should not come out of the box and if excess is there height of the box should increase dynamically ?

CodePudding user response：

This can be easily done. You can use below code :

min-height: 100px;
overflow: hidden;

Let me know if it doesn't resolve, I will help you with this.

CodePudding user response：

If you set width of your div, it's height will automatically adjust to fit the content. There is nothing you need to do for this to work.

div {
  max-width: 200px;
  /* For clarity */
  border: 1px solid black;
}

<div>Hello</div>

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

<div>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nulla. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Cras pede libero, dapibus nec, pretium
  sit amet, tempor quis. Vestibulum fermentum tortor id mi. Mauris dictum facilisis augue. Etiam quis quam. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Curabitur sagittis hendrerit ante. Integer vulputate sem a nibh rutrum consequat. Nulla quis diam. Mauris elementum mauris vitae tortor. Aenean placerat. Nunc tincidunt ante vitae
  massa. Pellentesque sapien. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cras elementum. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Itaque earum rerum hic tenetur a sapiente
  delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Mauris elementum mauris vitae tortor. Integer imperdiet lectus quis justo. Duis risus. Etiam egestas wisi a erat. Class aptent taciti sociosqu
  ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi scelerisque luctus velit.
</div>