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

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>
  );
}

CodePudding user response：

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"
    }}
>

CodePudding user response：

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