时间戳

首页 > 解决方案 > 如何阻止父容器调整大小以适应动态内容

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

问题描述

我有这样的设置

<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 流畅并且不需要添加特定的像素大小.

标签： htmlangularsass

解决方案

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

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

推荐阅读