如何使scrollbox响应？

Question

您好，我正在尝试在React responsive中创建一个滚动框。它在网页视图上工作，但当我进入移动设备时，它不会调整大小。我该如何解决这个问题呢？下面是CSS代码：

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

滚动框HTML代码是：

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

谢谢!

Answer 1

问题是，通过在元素上使用style属性应用固定的像素宽度值，您正在对滚动框的宽度进行硬编码。

为了给出准确的建议，我们需要看到更多的代码运行情况，但这里有几件事可以尝试：

1. width: "100%"
2. Remove width，而改用maxWidth: "1100px"

此外，如果使用非内联CSS通过.frame类名设置元素的样式，请考虑将所有其他样式属性也移至非内联CSS，而不是混合使用内联和非内联样式技术。

Answer 2

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