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

When .parent div width (or more generically the screen width) decreases, the .right div text should overlap on top of the .left div text.

.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 >
  <div >This is some text that can and should be overlapped as width decreases</div>
  <div >This Text should always overlap text to the left</div>
</div>

CodePudding user response：

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

Adding an overflow property to the left div will hide the text as the right text overlaps it in combination with a parent that is 100% width. Works like a charm.

CodePudding user response：

Dont know if I understand what you want. But here is a solution as I understood the task. When the screen has a width of less then 900px, the 'right' div will be displayed on top of the 'left' div. (Added some colors to make it easier to understand where each div is)

.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 >
  <div >This is some text that can and should be overlapped as width decreases</div>
  <div >This Text should always overlap text to the left</div>
</div>