Share the width for menu items with equal padding using CSS

I have a dynamic menu with a few items. I wanted the items to share the space available such that the bigger text takes more space. And all of them will have equal padding so that the hover color will fill the space defined for it.

 -----------------------------------------------------------
|   Test   |   Test Very Bigger Item   |  Test Bigger item  |
 -----------------------------------------------------------

The menu will look similar to above without the border. On hover, the background color will need to fill up the space around it.

ul {
  width: 600px;
  display: flex;
  justify-content: space-around;
  border: 1px solid blue;
  list-style: none;
  padding: 0px;
}
li {
  border: 1px solid blue;
}

<ul>
  <li>
    Test
  </li>
  <li>
    Test Very Very Large Bigger Item
  </li>
  <li>
    Test Bigger item
  </li>
</ul>

The above code ensures correct spacing but the hover does not take up the space available.

>Solution :

Use this style (everything is dynamic here) –

CSS (modified) –

ul {
  width: 600px;
  display: flex;
  list-style: none;
  padding: 0px;
  border: solid 1px blue;
}
li {
  flex: auto;
  text-align: center;
  padding: 8px 0;
}
li:hover {
  background: blue;
  color: white;
  cursor: pointer;
}

HTML (no change) –

<ul>
  <li>
    Test
  </li>
  <li>
    Test Very Very Large Bigger Item
  </li>
  <li>
    Test Bigger item
  </li>
</ul>

Working demo here