UL Horizontal Flex Breakable

<!DOCTYPE html>
<html>
    <style>
        body{font-family: Arial, Helvetica, sans-serif;}

        .ul-horizontal{

            padding: 0.3em 0px 0px 0.3px;
            display:flex;
            flex-direction:row;
            align-items: flex-start;
            flex-wrap: wrap;
            list-style-type: none;
            border:1px solid #990000;
            background-color: #dbb3b3;
        }

        .ul-horizontal li{
            border:1px solid #cdcdcd;
            border-right: 0px solid #cdcdcd;
            padding:0.3em 1em 0.3em 1em;
            background-color: #efefef;
        }
        .ul-horizontal li:last-child{
            border-right: 1px solid #cdcdcd;
        }
        .ul-horizontal li:last-child{border-top-right-radius: 6px;}
        .ul-horizontal li:first-child{border-top-left-radius: 6px;}
    </style>
<body>

<ul class="ul-horizontal">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>