在这种情况下，如何围绕内容设置<li>边框？

Question

以下情况： 我想要彼此相邻，一个左右一个 它们应该左对齐。
所以在div-parent中我认为我可以将它设置为display:flex并且我已经完成了，因为flex-flow的默认值是row nowrap，就像我想要的那样。登记/> 但是我的右侧div中有一个列表，当设置显示为弹性时，它的边界长度突然太短......有人可以向我解释这里发生了什么吗？ 我希望<li>的边框能够动态增长，以适应其内容（无动态高度）！
如果注释掉display:flex，它就会起作用，但它们并不是彼此相邻的。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;