react - 弹性容器外的弹性项目

Question

当我垂直收缩页面时，flex 容器会在 flexbox 之外。

我所有的内容都应该在灰色区域。

我尝试更改 css 类 .App 和 .App__main 上的 height 属性，但它不起作用。

App.js

import "./styles.css";

import Content from "./Content";

export default function App() {
  return (
    <div className="App">
      <div className="App__main">
        <Content />
      </div>
    </div>
  );
}

内容.js

import React from "react";

import List from "./List";

import "./styles.css";

export default function Content() {
  return (
    <>
      <div className="layout__container">
        <h1 className="layout__container__title">Media</h1>
          <List />
      </div>
    </>
  );
}

List.js

import "./styles.css";
import React, { useState } from "react";

export default function List() {
  const [list, setList] = useState([
    { id: 1, fileName: "file 1" },
    { id: 2, fileName: "file 2" },
    { id: 3, fileName: "file 3" },
    { id: 4, fileName: "file 4" },
    { id: 5, fileName: "file 5" },
    { id: 6, fileName: "file 6" }
  ]);
  return (
    <div className="list">
      {list.map((li) => {
        return (
          <figure title={li.fileName} key={li.id} className={"list__item"}>
            <div className="list__item__file">
              <div className="list__item__file__name">{li.fileName}</div>
            </div>
          </figure>
        );
      })}
    </div>
  );
}

styles.css

body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.App {
  text-align: center;
  background-color: #f6f7f7;
  border: 1px solid grey;
  height: 100vh;
}

.App__main {
  display: flex;
  height: 100%;
}

/* it's used to save some area for navigation bar */
.App__spacing {
  margin-top: 32px;
}

/* list */

.list {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: left;
  flex-wrap: wrap;
  flex-grow: 1;
}
.list .list__item {
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 1rem;
  margin-bottom: 1rem;
  background-color: white;
  border: 1px solid white;
  overflow: hidden;
  flex: 0 0 auto;
}
.list .list__item img {
  max-height: 100%;
  max-width: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list .list__item .list__item__file {
  background-color: #c3c4c7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.list .list__item .list__item__file .list__item__file__name {
  overflow: hidden;
  font-size: 0.9rem;
}
.list .list__item .ist__item__file .list__item__file__type {
  color: #8c8f94;
  font-size: 0.625rem;
  text-transform: uppercase;
  margin: 0 auto;
}

代码沙盒：
https://codesandbox.io/s/agitated-dew-rlnw3?file=/src/App.js

Answer 1

带有100vh 的App 容器具有静态高度，不会增长以适应其内容。

.App {
  text-align: center;
  background-color: #f6f7f7;
  border: 1px solid grey;
  height: 100vh;
}

改用父容器的100%。

.App {
  text-align: center;
  background-color: #f6f7f7;
  border: 1px solid grey;
  height: 100%;
}