使用 Flex，如何使最右边的 div 重叠在左边 div 作为父 div 宽度减小

Question

当 .parent div 宽度（或更一般的屏幕宽度）减小时，.right div 文本应重叠在 .left div 文本之上。

.parent {
  display: flex;
  align-items: center;
  letter-spacing: normal;
  outline: 0;
}

.left {
  text-align: center;
  display: flex;
  align-items: center;
}

.right {
  width: 15px;
  min-width: 15px;
  position: relative;
  display: flex;
  background-color: pink;
  z-index: 9999999999;
}

<div class="parent">
  <div class="left">This is some text that can and should be overlapped as width decreases</div>
  <div class="right">This Text should always overlap text to the left</div>
</div>

Answer 1

.left{
overflow: hidden;
}
.parent{
width:100%;
}

向左侧添加溢出属性 div 将隐藏文本，因为右侧文本与宽度为 100% 的父文本重叠。很有魅力。

Answer 2

不知道我是否明白你的意思。但这是我理解任务的解决方案。当屏幕宽度小于 900px 时，'right' div 将显示在 'left' div 之上。（添加了一些颜色以便更容易理解每个 div 的位置）

.parent {
  display: flex;
  align-items: center;
  letter-spacing: normal;
  outline: 0;
  background-color: green;
}

.left {
  text-align: center;
  display: flex;
  align-items: center;
  background-color: yellow;
}

.right {
  width: 15px;
  min-width: 15px;
  position: relative;
  display: flex;
  background-color: pink;
  z-index: 9999999999;
}

@media screen and (max-width: 900px) {
    .parent {
        flex-direction: column-reverse;
    }
}

<div class="parent">
  <div class="left">This is some text that can and should be overlapped as width decreases</div>
  <div class="right">This Text should always overlap text to the left</div>
</div>

使用 Flex，如何使最右边的 div 重叠在左边 div 作为父 div 宽度减小

Using Flex, how to make right most div overlap left div as parent div width decreases

css

flexbox

responsive