Flexbox не работает с несколькими дочерними элементами

Question

Я пытаюсь использовать flex: wrap; на двух делениях, но, похоже, это работает только на первом делении. Почему это? Я знаю, что могу поместить все в один блок, но я бы хотел, чтобы все было организовано.

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  color: white;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url('https://d31qu3dhiv8md1.cloudfront.net/images/rust-leaves-early-access-1516667234.jpg');
  background-size: cover;
  height: 100vh;
}

<div class="header">
  <div class="server-info">
    <div class="name">My Server</div>
    <div class="desc">This is the description</div>
  </div>

  <div class="links">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
  </div>
</div>

Answer 1

Я верю, что ниже, что вы после Я сделал 2 вещи:

• Добавлен контейнер div вокруг двух div внутри заголовка. Во флексбоксе теперь есть один элемент, который будет отцентрирован по вертикали и горизонтали
• Сделана ширина двух контейнеров 100%

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  color: white;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url('https://d31qu3dhiv8md1.cloudfront.net/images/rust-leaves-early-access-1516667234.jpg');
  background-size: cover;
  height: 100vh;
}

.server-info,
.links {
  width: 100%;
}

<div class="header">
  <div>
    <div class="server-info">
      <div class="name">My Server</div>
      <div class="desc">This is the description</div>
    </div>

    <div class="links">
      <a href="#">Link1</a>
      <a href="#">Link2</a>
    </div>
  </div>
</div>

Answer 2

Я думаю, что вы хотите, чтобы все гибкие элементы находились друг над другом? Вы можете установить flex-direction в column для обоих контейнеров следующим образом:

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  color: white;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url('https://d31qu3dhiv8md1.cloudfront.net/images/rust-leaves-early-access-1516667234.jpg');
  background-size: cover;
  height: 100vh;
}

.links {
  display: flex;
  flex-direction: column;
}

.server-info {
  display: flex;
  flex-direction: column;
}

<div class="header">
  <div class="server-info">
    <div class="name">My Server</div>
    <div class="desc">This is the description</div>
  </div>

  <div class="links">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
  </div>
</div>