Question 225908 in CSS Question posted in
Some basic documentation can be found here.

Css – Layout content container doesn't grow with its content

I have a web app layout, that consists of navigation bar, side navigation and page content. Unfortunately with current setup, page content container it doesn’t grow with content. https://codesandbox.io/s/friendly-allen-9ycgq4

function App() {
  return (
    <React.Fragment>
      <div style={{ backgroundColor: "blue", height: "3.25rem" }}>
        Global navigation
      </div>
      <div
        style={{
          display: "flex",
          padding: "1rem",
          gap: "1rem",
          height: "calc(100vh - 3.25rem)",
          width: "100%",
          maxWidth: "1600px",
          overflow: "auto",
          boxSizing: "border-box"
        }}
      >
        <div
          style={{
            width: "15rem",
            backgroundColor: "red",
            position: "sticky",
            top: "0",
          }}
        >
          Side navigation
        </div>
        <div style={{ flexGrow: "1" }}>
          <div style={{ height: "150%", backgroundColor: "green" }}>
            Main content
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Is there a way to make this component with flex-grow: 1 have full height of it’s children, not only screen size?

The reason I’m asking is because when i have this height of 150%, when i scroll down, padding of 1rem is not visible.

Tags:

2

Answers


  1. 0

    EDIT: I think I now get what you wanted to do Codesandbox

    <div style={{ display: "flex", flexDirection: "column",height: "100%"}}>
   <div style={{ background: "blue" }}>Header</div>
   <div style={{ display: "flex", flexGrow: 1, flexDirection: "row" }}>
      <div style={{ height: "100%", background: "green" }}>SideNav</div>
      <div style={{ flexGrow: 1, height: "100%", background: "red" }}>Content</div>
   </div>
</div>

    You also need to set height: 100%on html, body, #root, .App

    Login or Signup to reply.
  2. 0

    The code rearranges the layout components to ensure the side navigation appears first, followed by the main content. The global navigation bar is nested within the main content area. The side navigation is styled with a red background and fixed width. The main content area expands dynamically, and both the main content and side navigation are part of a flex layout.

     import "./styles.css";

export default function App() {
  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div style={{ width: "15rem", backgroundColor: "red" }}>
        Side navigation
      </div>
      <div style={{ flexGrow: 1, display: "flex", flexDirection: "column" }}>
        <div style={{ backgroundColor: "blue", height: "3.25rem" }}>
          Global navigation
        </div>
        <div
          style={{
            display: "flex",
            padding: "1rem",
            gap: "1rem",
            flexGrow: 1,
            overflow: "auto",
            boxSizing: "border-box",
            backgroundColor: "green",
          }}
        >
          Main content
        </div>
      </div>
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search