如何使滾動框響應？

Question

嗨，我正在嘗試在 React 響應式中制作一個滾動框。 它適用於 web 視圖，但是當我將 go 移動到移動設備時，它不會調整大小。 我怎樣才能解決這個問題？ 這是 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. 刪除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;
    }