How Can I Put Two Divs Alongside Each Other Keeping The Second One Centered Using Flexbox?

I have two divs:

I want to center the second inner div

Solution 1:

Children of flex container will follow his parent alignment rules. As you said, you need the left element to be sticked on the left of the centered one. So le left element should not be related to the container, but instead, to the centered element.

.Container {
  display: flex;
  justify-content: center;
}

.Left {
  background-color: red;
  position: absolute;
  right: 100%;
  top: 0;
}

.Centered {
  background-color: cyan;
  position: relative;
}













/* Demo only */

.Centered, .Left {
  border-radius: 4px;
  padding: 8px 24px;
}

<div class="Container"> 
  <div class="Centered">
    <div class="Left">Left</div>
    Centered
  </div>
</div>