Question

我有蓝色方块，其中包含的内容最多为class User(AbstractBaseUser): def __str__(self): return self.get_full_name() # get_full_name() is a standard User method。

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

我怎样才能做到这一点？

＆＃13;

800px

＆＃13;

.container {
  display: flex;
}

div {
  height: 80px;
}

.should-be-overlapped {
  width: 100%;
  min-width: 800px;
  background: blue;
}

.always-full-width {
  width: 400px;
  background: red;
}

＆＃13;

Answer 1

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

在蓝色周围添加一个包装（我推荐）。

Updated codepen

Stack snippet

＆＃13;

.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;  
}

＆＃13;

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

＆＃13;

或使用position: absolute。

Updated codepen

＆＃13;

.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;  
}

＆＃13;

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

＆＃13;

Answer 2

我有蓝色方块，其中包含的东西总计达800px。

然后你应该使用flex: 0 1 800px，启用来收缩：

＆＃13;

.container {
  display: flex;
}

div {
  height: 80px;
}

.should-be-overlapped {
  /*min-width: 800px;*/
  flex: 0 1 800px; /* doesn't grow but shrinks, initial width set to 800px (this is also its "max-width") */
  background: blue;
  word-break: break-all; /* for longer unbreakable strings, just for demo */
}

.always-full-width {
  /*width: 400px;*/
  flex: 0 0 400px; /* since you're using flexbox, doesn't grow nor shrink, initial width set to 400px (fixed) */
  background: red;
}

＆＃13;

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

＆＃13;

当视口用完房间时，使元素与其他元素重叠

2 个答案: