CODEWITHSUNDEEP
javascripthtmlcssreactjsflexbox
Coca Minus
Coca Minus

Reputation: 31

How to make content scrollable inside a flex box without given the height?

I'm trying to create a flex row split panel with a footer inside a column flexbox. However, I find out that I cannot make the content to be scrollable unless I limit the height of the container by coding height: calc(100% - FooterHeight). Does anyone know an alternative way to achieve this?

Thanks in advance!

Sandbox URL

My code:

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

const lefts = new Array(15).fill("Left");
const rights = new Array(15).fill("Right");

export default function App() {
  return (
    <div className="height">
      <div className="column">
        <div className="row">
          <div className="row-left">
            {lefts.map((left, index) => {
              return (
                <div key={index} className="item">
                  {left + index}
                </div>
              );
            })}
          </div>
          <div className="row-right">
            {rights.map((right, index) => {
              return (
                <div key={index} className="item">
                  {right + index}
                </div>
              );
            })}
          </div>
        </div>
        <div className="footer">Footer</div>
      </div>
    </div>
  );
}

My CSS:

.height {
  height: 600px;
  width: 600px;
  background-color: gray;
  display: flex;
  flex-direction: column;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.row {
  flex: 1;
  display: flex;
  height: calc(100% - 60px); // not preferred
}

.row-left {
  width: 200px;
  border: 1px solid red;
  overflow: auto;
}

.row-right {
  flex: 1;
  border: 1px solid peru;
  overflow: auto;
}

.item {
  padding: 16px;
}

.footer {
  flex-shrink: 0;
  height: 60px;
  border: 1px solid blue;
}

Upvotes: 3

Views: 61

Answers (1)

Mario Petrovic
Mario Petrovic

Reputation: 8332

You need to replace that height with overflow: hidden for .row:

.row {
  flex: 1;
  display: flex;
  overflow: hidden;
}

Here is fork of your Codesandbox: https://codesandbox.io/s/fast-wood-1wxii

Upvotes: 1

Related Questions