The issue is that you’re hardcoding the width of the scrollbox by applying a fixed pixel width value via the style attribute on the element.

We’d need to see more of your code in action to give precise advice, but here are a few things to try:

1. width: "100%"
2. Remove width, and instead use maxWidth: "1100px"

Also, if you’re using non-inline CSS to style the element via the .frame classname, consider moving all your other styling properties to the non-inline CSS as well, instead of mixing inline and non-inline styling techniques.

 <div id="box"> 
        
        Deutsches Ipsum Dolor id latine Fußballweltmeisterschaft complectitur pri, mea meliore denique Anwendungsprogrammierschnittstelle id. Elitr expetenda nam an, Apfelschorle ei reque euismod assentior. Odio Freude schöner 
        
        Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
        
        Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
        Deutsches Ipsum Dolor id latine Fußballweltmeisterschaft complectitur pri, mea meliore denique Anwendungsprogrammierschnittstelle id. Elitr expetenda nam an, Apfelschorle ei reque euismod assentior. Odio Freude schöner 
        
        Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
         </div>
    
    #box {
      position: absolute;
      width: 50%;
      height: 50%;
      top: 10;
      left: 10;
      overflow: auto;
      border: solid red 2px;
    }

Hi I’m trying to make a scrollbox in React responsive. It works on web view but when I go to mobile, it doesn’t resize. How can I fix this? Here is the CSS code:

.frame {
    background-color: rgba(0, 0, 0, 0.349);
    padding-top: 10px;
    /* margin-top: 20px; */
    margin-bottom: 20px;
    margin-left: -10px;
    margin-right: -10px;
    position: relative;
    display: table-cell;
}

and the scrollbox HTML code is:

<div class= "frame" 
  style={{width:"1100px", 
  height: "415px",
  overflow:"auto",
  padding:"2px", 
  paddingTop: "10px"}}>

Thank you!