Ul li elements exceeding DIV height

Question

I have a div with fixed height and it has Ul, li elements, so if the contents of the ul/li elements exceed the div height, it should align to the right side and not overflow outside the div. I have tried everything but not able to achieve it, below is my code:

 div { max-height: 200px; background: red; }

 <div> <h3>ItemsA</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> <h3>ItemsB</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> <h3>ItemsC</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div>

Answer 1

If you want place a row of li elements. You can give the div display: flex feature. If the height of the lis exceeds the height of the div, you can use overflow-y: auto . This puts the scroll bar to parent div

 .parent { max-height: 200px; background: red; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 20px; }

 <div class="parent"> <div> <h3>ItemsA</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div> <h3>ItemsB</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div> <h3>ItemsC</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div> <h3>ItemsD</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> </div>

Answer 2

First of all I'd highly suggest wrapping each <ul> and its associated <h3> into a container, so you can control the layout much better. In whatever layout you're using, it would directly affect both the <ul> and the <h3> -elements individually. By wrapping the two associated elements into separate containers, the layout properties are affecting those containers only.

One way to solve this is using flex-wrap . By applying flex-direction: column , the flex-flow will try to put the elements in a single column, and if they can't, they will wrap into a new column.

 /* Simple reset */ * { margin: 0; box-sizing: border-box; } .wrapper { max-height: 200px; background: red; display: flex; flex-direction: column; flex-wrap: wrap; }

 <div class="wrapper"> <div class="container"> <h3>ItemsA</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div class="container"> <h3>ItemsB</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div class="container"> <h3>ItemsC</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div class="container"> <h3>ItemsD</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> </div>

Answer 3

 .item-list { display: flex; flex-direction: column; flex-wrap: wrap; height: 100px; overflow-y: scroll; background: red; }

 <div class="item-list"> <div> <h3>ItemsA</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div> <h3>ItemsB</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <div> <h3>ItemsC</h3> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> </div>