html - 当视口(viewport)空间不足时使一个元素与其他元素重叠

Question

我有一个蓝色方 block ，其中包含总计 800px 的内容。

我希望红色方 block 始终完全可见。也就是说，当你缩小视口(viewport)时，红色方 block 应该与蓝色方 block 重叠，而不是像实际那样消失在右边。

我怎样才能做到这一点？

.container {
  display: flex;
}

div {
  height: 80px;
}

.should-be-overlapped {
  width: 100%;
  min-width: 800px;
  background: blue;
}

.always-full-width {
  width: 400px;
  background: red;
}

<div class="container">
  <div class="should-be-overlapped"></div>
  <div class="always-full-width"></div>
</div>

Answer 1

要做到这一点，主要有两种方法。

要么在蓝色周围添加一个包装器(我推荐)。

Updated codepen

堆栈片段

.container {
  position: relative;
  display: flex;
}

div {
  height: 80px;
}

.wrapper {
   flex: 1;
   overflow: hidden;
}

.should-be-overlapped {
   width: 100%;
   min-width: 800px;
   background: blue;
}

.always-full-width {
  flex: 0 0 400px;
  background: red;  
}

<div class="container">
  <div class="wrapper">
    <div class="should-be-overlapped">
    </div>
  </div>
  <div class="always-full-width">
  </div>
</div>

---

或者使用position: absolute。

Updated codepen

.container {
  display: flex;
  position: relative;
  overflow: hidden;
}

div {
  height: 80px;
}

.should-be-overlapped {
   width: 100%;
   min-width: 800px;
   background: blue;
}

.always-full-width {
  position: absolute;
  right: 0;
  width: 400px;
  background: red;  
}

.<div class="container">
  <div class="should-be-overlapped">
  </div>
  <div class="always-full-width">
  </div>
</div>