UL height not expanding all the way down with floating LI

Question

Hi,

I got this code:

  <ul>
   <li>some list</li>
   <li>some list</li>
   <li>some list</li>
   <li>some list</li>
   <li>some list</li>
   <li>some list</li>
  </ul>

and my css:

ul {
background-color: #EDEADF;
height: 30px;
}

li {float: left;}

on a PC screen this looks fine. The problem comes when you see it on a mobile because the LI elements go vertical instead of horizontal. Im okay with that, but what I dont like is that the UL stays at the same height and since it has a background it looks weird. It should expand automatically and reach the bottom to cover until the very last LI. How can i achieve that effect?

Thank you.