如何阻止父容器调整大小以适应动态内容

Question

我有这样的设置

<app-component> <!-- need this to not fit the content but be reactively sized-->
 <div> <!--display:flex-->
  <form> <!-- display: flex-->
   <div> <!-- display: block-->
    <section> <!-- display: flex-->
     <div> <!-- display:flex-->
      <app-component> width:100%-->
       <div> <!-- display: flex row-->
        <div> <!-- overflow-x: scroll, whitespace: nowrap-->
          ***inserted here are photos the user is uploading***
          ***this extends from left to right ***
        </div>
       </div>
      </app-component>
     </div>
    </section>
   </div>
  </form>
 </div>
<app-component>

问题是第一个应用程序组件正在调整大小以适应继续添加的图像。包含图像的即时 div 及其包含的 div 都可以正常运行，但包含的应用程序组件适合不可见的照片，这会导致整个页面脱落。

我可以通过设置宽度的静态参数轻松解决这个问题，但这是一个反应式应用程序，必须缩放到所有不同的屏幕尺寸，所以我想知道是否有人有一个很好的解决方案来保持 css 流畅而不需要添加特定的像素大小。

Answer 1

您是否尝试将容器设置为视口单位？

width: 100vw;
height: 100vh;
overflow: auto;