I try to implement an overflow in Form react-router, that's work in a classic <div></div> but when I use <Form></Form> my overflow doesn't work. I don't find any topic who talk about that.

The context is a Remix app who use import { Form } from 'react-router'. I'm using React-Router v7.

Working example:

<div>
  <div style={{ overflowY: "auto" }}>
    <div>Truc</div>
    <div>Truc</div>
    .../...
    <div>Truc</div>
  </div>
</div>

Non-working example:

<Form>
  <div style={{ overflowY: "auto" }}>
    <div>Truc</div>
    <div>Truc</div>
    .../...
    <div>Truc</div>
  </div>
</Form>

Is it a bug, or Form cannot work with the overflow, or there is a trick for this case? All the other style work except the overflow rule.

I try to implement an overflow in Form react-router, that's work in a classic <div></div> but when I use <Form></Form> my overflow doesn't work. I don't find any topic who talk about that.

The context is a Remix app who use import { Form } from 'react-router'. I'm using React-Router v7.

Working example:

<div>
  <div style={{ overflowY: "auto" }}>
    <div>Truc</div>
    <div>Truc</div>
    .../...
    <div>Truc</div>
  </div>
</div>

Non-working example:

<Form>
  <div style={{ overflowY: "auto" }}>
    <div>Truc</div>
    <div>Truc</div>
    .../...
    <div>Truc</div>
  </div>
</Form>

Is it a bug, or Form cannot work with the overflow, or there is a trick for this case? All the other style work except the overflow rule.

• javascript
• css
• forms
• react-router
• overflow

• It might depend on your DOM structure and applied CSS. In the second code example you are basically inserting a form element between the divs. Can you create a running CodeSandbox demo of the code you are working with that reproduces the issue that readers could inspect live? – Drew Reese Commented Mar 13 at 15:55
• I try to create a code to explain in codesandbox.io/p/sandbox/zmpcjr?file=%2Fsrc%2FApp.tsx%3A17%2C12 but I cannot set Form like I want because I4m not the main coder in the project and I don't understand well how Form work – Knupel Commented Mar 13 at 18:24

1 Answer 1

When you insert Form between the div container that enforces a static height and the div container that should apply any overflow rules it breaks the abstraction between the divs because it (Form) hasn't any intrinsic height property.

Either push Form up the ReactTree to wrap the div elements:

<div className="App">
  <Form>
    <div style={{ height: "150px", backgroundColor: "red" }}>
      <div
        style={{
          height: "100%",
          overflowY: "auto",
          display: "flex",
          flexDirection: "column",
        }}
      >
        ...
      </div>
    </div>
  </Form>
</div>

Or push Form down the ReactTree under the div parent-child pairing:

<div className="App">
  <div style={{ height: "150px", backgroundColor: "red" }}>
    <div
      style={{
        height: "100%",
        overflowY: "auto",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Form>
        ...
      </Form>
    </div>
  </div>
</div>

Or alternatively you can tell the Form component to inhabit 100% of the height of its parent div element so the child div element has a height property to overflow in.

<div className="App">
  <div style={{ height: "150px", backgroundColor: "red" }}>
    <Form style={{ height: "100%" }}>
      <div
        style={{
          height: "100%",
          overflowY: "auto",
          display: "flex",
          flexDirection: "column",
        }}
      >
        ...
      </div>
    </Form>
  </div>
</div>