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>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>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>.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>