html - How to have left side equal to right side? -

i have html structure this:

nav{    float:left;    display:inline-block;    width:40px;    list-style-type:none;  }  header,.body{    display:inline-block;  }  header{    height:30px;    background:blue;   width: calc(100% - 40px);  }  .body{    background:red;   width: calc(100% - 40px);  }

<div class="wrapper">    <nav>      <ul>         <li>test 1</li>         <li>test 1</li>         <li>test 1</li>         <li>test 1</li>         <li>test 1</li>      </ul>   </nav>    <header>header</header>    <div class="body">        <h3>something</h3>     </div>  </div>          

what want <div class="body"></div> going end of nav height. if have 100 li , header have same height of 30px, body red background go end of nav. have same height. suggestion how can that?

you can wrap header , content ( changed class body content don't confuse default body tag ) inside wrapper ( named contentwrapper ) , use flexbox on wrapper

see below

the height of content ( red space ) calculated calc(100% - 30px) 100% entire height of column , 30px height of header

.wrapper {    display: flex;  }    nav {    width: auto;    background: green;  }    header {    height: 30px;    background: blue;  }    .content {    background: red;    height: calc(100% - 30px)  }    h3 {    margin-top: 0  }

<div class="wrapper">    <nav>      <ul>        <li>test 1</li>        <li>test 1</li>        <li>test 1</li>        <li>test 1</li>        <li>test 1</li>        <li>test 1</li>        <li>test 1</li>        <li>test 1</li>        <li>test 1</li>        <li>test 1</li>        <li>test 1</li>      </ul>    </nav>    <div class="contentwrapper">      <header>header</header>      <div class="content">        <h3>something</h3>      </div>    </div>  </div>