如何使不断增长的div不会溢出其父级，该父级还包含上面的固定div

问题描述 投票：0回答：1

在下面的代码中，主 div 将 

max-height
设置为 
100%
（其父级的高度为 
300px
）。这个主 div 包含两个子元素：一个具有固定高度，第二个具有 
flex-grow: 1
，其具有大量内容的子元素已设置 
overflow-x: scroll
。

问题是第二个孩子及其大子孩子不想表现得很好并且滚动，但很粗鲁并且溢出了他们的父母（主div）。 怎么解决？

<html>
<head>
  <style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
  </style>
</head>

<body style="height: 300px; max-height: 300px; margin: 0px; padding: 5px; border: 1px solid red;">
  <div style="height: 100%; max-height: 100%; display: flex; flex-direction: column; margin: 0px; padding: 5px; border: 1px solid green;">

    <div style="height: 50px; padding: 5px; border: 1px dashed blue;">
      top
    </div>

    <div style="flex-grow: 1; display: flex; padding: 5px; border: 1px dashed orange;">
      <div style="padding: 5px; border: 1px dashed blue;">
        left
      </div>
      <div style="flex-grow: 1; padding: 5px; border: 1px dashed blue; overflow-y: scroll;">
        center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>
        center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>
      </div>
      <div style="padding: 5px; border: 1px dashed blue;">
        right
      </div>
      </div>
    </div>
  </div>
</body>

</html>

html css layout
1个回答
0
投票

尝试使用 

max-height
限制子级的大小。当您使用 
flex-grow: 1
时，它允许子元素增长以吸收容器中的额外空间，但当其内容太大时，它不会自动将其大小限制为父元素的边界。

解决方法如下：

<html>
<head>
  <style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
  </style>
</head>

<body style="height: 300px; max-height: 300px; margin: 0px; padding: 5px; border: 1px solid red;">
  <div style="height: 100%; max-height: 100%; display: flex; flex-direction: column; margin: 0px; padding: 5px; border: 1px solid green;">

    <div style="height: 50px; padding: 5px; border: 1px dashed blue;">
      top
    </div>

    <!-- Adjusted div with max-height calculation -->
    <div style="flex-grow: 1; display: flex; padding: 5px; border: 1px dashed orange; max-height: calc(100% - 50px);">
      <div style="padding: 5px; border: 1px dashed blue;">
        left
      </div>
      <div style="flex-grow: 1; padding: 5px; border: 1px dashed blue; overflow-y: scroll;">
        center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>
        center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>center<br/>
      </div>
      <div style="padding: 5px; border: 1px dashed blue;">
        right
      </div>
    </div>
  </div>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.