.app {
  display: flex;
  flex-direction: column;
  width: 85%; /* Set the width to 75% of the screen width */
  height: 100vh;
  margin: 0 auto; /* Center the app horizontally */
}

.top,
.bottom {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  /* Add margin to create space on top and bottom */
}

.middle {
  flex: 7; /* 70% */
  background-color: #e0e0e0;
  overflow-y: auto;
  margin-top: 3px;
  margin-bottom: 3px; /* Add margin to create space on top and bottom */
}

.component {
  margin: 10px; /* Add margin to create space around components */
}


import React from "react";
import "./App.css";

function App() {
  return (
    <div className="app">
      <div className="top">15%</div>
      <div className="middle">
        {/* Add your components here */}
        <Component1 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        <Component2 />
        {/* Add more components as needed */}
      </div>
      <div className="bottom">15%</div>
    </div>
  );
}

function Component1() {
  return <div className="component">Component 1</div>;
}

function Component2() {
  return <div className="component">Component 2</div>;
}

export default App;