How can I make a border around that fits around the content in this case?

Question

Following situation: I want to have to divs next to each other, one left one right.
They should be aligned left.
So in the div-parent I thought I can just set it to display:flex and I'm done, since flex-flow's default is row nowrap, just like I want it.
But I have a list in my right-side div and suddenly its border-length is too short when setting display to flex...can someone explain to me what is happening here?
I want the border of <li> to grow dynamically to fit its content how it is now (no dynamic height)!
It works if commenting out display:flex but then they're not next to each other.

.body {
  display: flex;
}

.left {
  border: solid;
  width: 100px;
}

li {
  border: 2px solid rgb(186, 26, 46);
  border-top-right-radius: 2.25em;
  display: flex;
  flex-flow: column wrap;
  height: 100px;
  justify-content: space-around;
  list-style-type: none;
  position: relative;
}

<div class="body">


  <div class="left">
    Test!
  </div>
  <div class="right">

    <ul>


      <li>

        <div>
          Start Date 08.10.2016

        </div>

        <div>
          Start Time 09:25

        </div>

        <div>
          End Time 10:25

        </div>

        <div>
          Lawyer



        </div>

        <div>
          Client



        </div>

        <div>
          Translator



        </div>

        <div>
          Question

        </div>

        <div>
          Detailed Description test test

        </div>

        <div>
          Documents Ready No



        </div>

        <div><a href="">Edit</a></div>
        <div><a href="">Delete</a></div>
        <div><a href="">Show</a></div>
      </li>
    </ul>
  </div>
</div>