Угловые элементы в флексе не имеют фиксированной высоты после того, как их составляющие

Question

Я сейчас делаю свое портфолио на английском и делаю страницу навыков, у меня есть список навыков, сгруппированных по категориям, у каждой категории есть свой блок, и несколько навыков с прогрессом и количеством навыков отличаются для каждой категории.Дело в том, что поскольку секция умений не была отдельным компонентом, все было в порядке, потому что высота ящиков была исправлена, и если у одного ящика было меньше умений, чем у другого в строке, было добавлено пустое пространство, чтобы отрегулировать элементы в строке, чтобы они имели одинаковую высоту, теперь, когдаЯ превратил div в компонент Все элементы (компоненты) в строке имеют различную высоту в соответствии с их содержанием.

страница навыков до:

<div class="flex-container">
   <div class="skill-section">
      <h3> Skill title</h3>
      <app-skill-progress></app-skill-progress>
      <app-skill-progress></app-skill-progress>
      <app-skill-progress></app-skill-progress>
   </div>
   <div class="skill-section">
      <h3> Skill title</h3>
      <app-skill-progress></app-skill-progress>
      <app-skill-progress></app-skill-progress>
   </div>
</div>

страница навыков после:

<div class="flex-container">
   <app-skill-section></app-skill-section> // has 3 skills inside
   <app-skill-section></app-skill-section> // has 2 skills inside
</div>

вот стили для классов:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.skill-section {
  width: 560px;
  margin-bottom: 35px;
  margin-right: 30px;
  border-radius: 8px;
  padding: 24px 16px;
  background-color: #fff;
  box-shadow: 0px 5px 20px -1px rgba(0, 0, 0, 0.55);
  position: relative;
}

Answer 1

Класс .skill-section теперь вложен в новый элемент компонента, поэтому он больше не является непосредственным потомком .flex-container. Я рекомендую изменить селектор из класса .skill-section на элемент app-skill-section и добавить display: block.

Вот так:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
app-skill-section {
  width: 560px;
  margin-bottom: 35px;
  margin-right: 30px;
  border-radius: 8px;
  padding: 24px 16px;
  background-color: #fff;
  box-shadow: 0px 5px 20px -1px rgba(0, 0, 0, 0.55);
  position: relative;
  display: block;
}

Кроме того, вы можете применить эти стили непосредственно к элементу :host в CSS для нового компонента:

:host {
  width: 560px;
  margin-bottom: 35px;
  margin-right: 30px;
  border-radius: 8px;
  padding: 24px 16px;
  background-color: #fff;
  box-shadow: 0px 5px 20px -1px rgba(0, 0, 0, 0.55);
  position: relative;
  display: block;
}