I have a layout where the header and footer are fixed, and the middle section is scrollable. I’m using a flexbox layout and have set overflow-y: auto for the middle section.

Within this middle section, I have a horizontally scrollable container. I want to display left and right scroll icons that are positioned such that they are partially visible (50%) outside the scrollable container. To achieve this, I’ve set the icons with position: absolute and applied the necessary CSS. However, the parts of the icons that should be visible outside the container are not showing up.

Please click here to see the demo application on stackblitz.

<div id='root'>
  <div>Header</div>
  <div className="home-container">
    <main>
      <section>
        <div className="cards">
          <div className="card">Card</div>
          <div className="card">Card</div>
          <div className="card">Card</div>
          <div className="card">Card</div>
        </div>
        <button className="half-button">Click Me</button>
      </section>
      <section>
        <div className="card">Card</div>
      </section>
      <section>
        <div className="card">Card</div>
      </section>
    </main>
  </div>
  <div>Footer</div>
</div>

body {
  margin: 0;
}

#root {
  margin: 0 auto;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
}

* {
  box-sizing: border-box;
}

.home-container {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  overflow-y: auto;
  max-width: calc(100% - 40%);
}

main {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 2rem;
}

section {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 50px;
  background-color: gray;
  border: 1px solid #000;
}

.half-button {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background-color: coral;
  border: none;
  cursor: pointer;
}

.cards {
  display: flex;
  overflow-x: auto;
  flex: 1;
}

.card {
  flex: none;
  height: 200px;
  width: 200px;
  background-color: blanchedalmond;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

I am expecting to show the left and right button in the horizon scrollable container while keep the mid part scrollable