Как сделать флексбоксы одинаковой ширины и высоты

Question

Я пытаюсь сделать все элементы flexbox одинаковой по ширине и высоте, даже если они увеличивают количество строк из-за небольшого экрана (где третья ссылка переносится). Я считал, что ключевым свойством является align-items:stretch, но это не работает. Где я делаю ошибку?

Я не могу изменить HTML - структура имеет вид nav > ul > li > a.

Я много читал и видел подобные решения здесь, но все они представляют собой простые списки без внутренней структуры (в моем случае ссылки a), и они просто устанавливают display:flex на дочерний элемент. Это, однако, в моем случае нарушает требование «одинаковой ширины».

body {
  font-family: Lucida, sans-serif;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;    
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* This is what I thought to be the key property*/
}  
nav li {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center; 
}
nav a {
  text-decoration: none;
  color: #000;
  border: 2px solid rgb(20, 60, 168);
  background-color: rgba(20, 60, 168, .2);
  padding: 10px 10px 8px;
  display: block;
}

<nav>
  <ul>
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">The third seems to be quite long</a></li>
    <li><a href="#">Fourth</a></li>
  </ul>
</nav>

Answer 1

Вы почти хороши, li равны по высоте, но не по содержанию. Просто добавьте height: 100%;

body {
  font-family: Lucida, sans-serif;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;    
  display: flex;
  justify-content: space-between;
  /*align-items: stretch;  not needed, it's by default*/
}  
nav li {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center; 
}
nav a {
  text-decoration: none;
  color: #000;
  border: 2px solid rgb(20, 60, 168);
  background-color: rgba(20, 60, 168, .2);
  padding: 10px 10px 8px;
  display: block;
  height:100%;
  box-sizing:border-box; /*Don't forget this*/
}

<nav>
  <ul>
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">The third seems to be quite long</a></li>
    <li><a href="#">Fourth</a></li>
  </ul>
</nav>