flexbox не переносит содержимое в React

Question

Код, который у меня сейчас есть, здесь.https://codepen.io/bradenshipley/pen/RqzyJr

import React, { Component } from "react"

import "./App.css"
import axios from "axios"

class App extends Component {
 constructor(props) {
super(props)
this.state = {
  cards: []
}
  }
  componentDidMount() {
   const baseURL = "https://api.magicthegathering.io/v1"
    axios
     .get(`https://api.magicthegathering.io/v1/cards`)
  .then(res => this.setState({ cards: res.data.cards }))
}
 render() {
const card = this.state.cards.map(card => {
  return (
    <div className="card" key={card.number}>
      {/* <span className="cardName">{card.name}</span> */}
      <img
        className="cardImg"
        src={card.imageUrl}
        alt=""
        height="120px"
        width="80px"
          />
        </div>
      )
    })
    return (
      <div className="App">
        <div className="card-container">
           <div className="App-header">
            <h1>Magic The Gathering: Deck Builder</h1>
           </div>{" "}
           <div>{card}</div>
        </div>
      </div>
    )
  }
}

.App {
 height: 1000px;
[enter image description here][1]}

.App-header {
  background-color: #282c34;
  min-height: 25vh;
  min-width: 100vw;
  text-align: center;
  align-items: top;
  justify-content: top;
  font-size: calc(10px + 2vmin);
  color: white;
  position: top;
  display: absolute;
}

.cardImg {
  height: 350px;
  width: 250px;
}

.cardArea {
  flex: 1;
  width: 100vw;
  height: 75vh;
  overflow: auto;
}

.card-container {
  min-height: 400px;
  display: flex;
  display: -webkit-flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
}
.card-container:after {
  display: block;
  content: "invisible node";
  flex: 999 999 auto;
}

.card {
  flex: 17 13 auto;
  margin: 0px;
  /* overflow: auto; */
}

Я не совсем уверен, почему flexbox смещает мой заголовок вниз к середине, и почему он не следует указанному мной направлению гибкости.Я использовал инструмент моделирования flexbox, чтобы получить значения, и он должен выглядеть примерно так, как на фотографии.Любое руководство будет с благодарностью.

Answer 1

Проблема с <div className="card-container">.<div className="App-header"> находится внутри контейнера карты, который действует как элемент flex-parent, таким образом, заголовок App является элементом flex-child и будет перемещаться вдоль элемента div карты в зависимости от направления flex-у ... у вас естьразместить <div className="App-header"> снаружи (над) <div className="card-container">