Change the size of the parent division according to the divs for children in it


I have a problem with a div not changing its height, which is not set in CSS, when its inner content (like ul, other divs, etc) changes.

my html code:

<div id="main_wrapper">
    <div id="navigation">
            <li><a href="#"> link one </a></li>
            <li><a href="#"> link two </a></li>
            <li><a href="#"> link three </a></li>
            <li><a href="#"> link four </a></li>

my css code:

#main_wrapper {
  display: block;
  border:1px solid black;
#navigation {
  background-color: rgba(0, 0, 0, 0.4);
  position: relative;
  padding: 8px;
  float: right;

demo here

Add overflow: auto; to #main_wrapper.