Ul li elements exceeding DIV height-CodePudding

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:

HTML

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

CSS

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

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