CODEWITHSUNDEEP
cssreactjs
qweezz
qweezz

Reputation: 804

How to add overflowY to a flexbox child only without height: calc function?

I have a quite complex layout. If simplified it's a flexbox with two child flexbox items. Parent flexbox takes full height of a screen and child flexboxes takes full height as well.

How can I make a one child flexbox take full screen height and if its bigger than a user screen then scrollY should appear for that child? I'm trying to find a solution without calc function ...how can I make it another way (might be it is possible with height: 100%)?

The amount of content in child can be different so I need overflowY only if content exceeds screen size. In the code example below I need blue container take full height and scrollY because there's lot of content.

Here's codesandbox: https://codesandbox.io/s/modest-leakey-bk75j8?file=/src/App.js

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        gap: "20px",
        background: "pink",
        minHeight: "100vh"
      }}
    >
      <div
        style={{
          flex: 1,
          background: "green"
        }}
      >
        Container 1
      </div>
      <div
        style={{
          flex: 1,
          background: "lightblue",
          height: "500px",
          overflow: "auto"
        }}
      >
        <p>{TEXT}</p>
        <p>{TEXT}</p>
        <p>{TEXT}</p>
      </div>
    </div>
  );
}

Upvotes: 1

Views: 47

Answers (2)

Lucas &#193;lek
Lucas &#193;lek

Reputation: 26

You can just remove the height attribute from your blue box. You can also remove overflow and still have the described effect.

Here's a sandbox exemple: https://codesandbox.io/s/elegant-jang-3k0pq4?file=/src/App.js

Upvotes: 0

ilketorun
ilketorun

Reputation: 434

I believe you just need to change one line in light blue box's style to achieve what you have described. Just change the maxHeight to maxHeight: "100vh".

Then it becomes:

<div
    style={{
      flex: 1,
      background: "lightblue",
      maxHeight: "100vh",
      overflow: "auto"
    }}
>

Upvotes: 2

Related Questions