较小设备上 flexbox 列中的重叠 div

Question

我正在尝试为移动响应式 Web 应用程序设计侧边栏组件。目标是让侧边栏响应不同的屏幕尺寸。但是，随着屏幕尺寸变小，底部 div 将与顶部 div 重叠，顶部 div 具有固定高度。您可以看到问题的一般示例 here on codepen and described in this picture.

这是来自 codepen

的 html/css 的简化片段

.container {
  width: 10%;
  height: 100%;
  position: fixed;
  display: flex;
  flex-direction: column;
}

.div1 {
  height: 250px;
  position: absolute;
  top: 0;
 }

.div2 {
  height: 75px;
  position: absolute;
  bottom: 0;
 }

<div class='main'>
  <div class='container'> 
    <div class='div1'> 
      content div1
    </div>
    <div class='div2'> 
      content div2
    </div>
  </div>
</div>

您必须赋予 (div2) 什么属性才能在开始侵占 div1 时停止重叠？期望的结果是 div2 将始终垂直对齐，并且与 continue 的重叠超过屏幕当前高度，您只需向下滚动即可查看 div2 的内容。

Answer 1

这是一个，将 height 测量值从 px 替换为 % 这将导致 div 根据其容器的高度采用 height 以下内容是一个例子

.container {
  width: 10%;
  border: 1px solid black;
  height: 100%;
  position: fixed;
  display: flex;
  flex-direction: column;
}

.div1 {
  height: 40%;
  position: absolute;
  top: 0;
  background-color: lightblue;
  border: 1px dotted black;
}

.div2 {
  height: 25%;
  position: absolute;
  bottom: 0;
  background-color: lightyellow;
  border: 1px dotted black;
}

<div class='main'>
  <div class='container'>
    <div class='div1'>
      content
    </div>
    <div class='div2'>
      content
    </div>
  </div>
</div>

Answer 2

将 div2 的 css 属性更改为：

.div2 {
  max-height: 75px;
  height: 20%;
  position: absolute;
  bottom: 0;
  background-color: lightyellow;
  border: 1px dotted black;
 }

div2 的最大高度将为 75（因此在较大的屏幕上它将是 75px，如您所愿），但是，随着屏幕变短，它会开始减小。

您还可以为较小的屏幕创建媒体查询。

较小设备上 flexbox 列中的重叠 div

Overlapping divs in flexbox column on smaller devices

html

css

mobile

flexbox

responsive-design