Using flexbox sometimes creates strange margins.
In the following code, there is an unset blank between A and B, but the cause is unknown.
Thank you.

  test 
 <ul>
 <li>
 <dl>
 <dt>A</dt>
 Contains<dd>text.</dd>
 </dl>
 </li>
<Li>
 <dl>
 <dt>B</dt>
 Contains<dd>text.</dd>
 </dl>
 </li>
  <li>
 <dl>
 <dt>C</dt>
 Contains<dd>text.</dd>
 </dl>
 </li>
 <li>
 <dl>
 <dt>D</dt>
 Contains<dd>text.</dd>
 </dl>
 </li>
 </ul>
 

. flex {
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.Area {
  .title {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
  }
}
.box {
  flex-wrap: wrap;
  li {
      width: 100%;
    }
  }
.menu {
  width: 100%;
  padding: 10px 15px;
  background-color: rgba (# 333, .9);
  font-weight: bold;
  margin-bottom: 15px;
    .name {
      width: 100%;
    }
    .price {
      color: lighten (# f99,20%);
      width: 100%;
    }
  }