Center And Right Align Flexbox Elements With Text-oveflow And Taking Empty Space On Left Side

@michael-benjamin Center and right align flexbox elements almost what I want, but with 2 differences: Div have to take empty space at left side too (when it be wide) Div have to c

Solution 1:

CSS grid can do it like below:

.container {
  margin: 10px;
  display: grid;
  grid-template-columns: 1fr minmax(0,max-content) 1fr;
  color: #fff;
}
.container::before {
  content:"";
}

.b {
  margin-left: auto;
  background: grey;
}

.a {
  margin: auto;
  background: blue;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}



body {
  background:linear-gradient(red,red) center/ 2px100% no-repeat;
}

<divclass="container"><divclass="a">AA</div><divclass="b">BBBBBBBBBBBBBBBB</div></div><divclass="container"><divclass="a">AA</div><divclass="b">BBBBBBBBBBBBBBBB</div></div><divclass="container"><divclass="a">AAAAAAAAAAAAAA</div><divclass="b">BBBBBBBBBBBBBBBB</div></div><divclass="container"><divclass="a">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div><divclass="b">BBBBBBBBBBBBBBBB</div></div><divclass="container"><divclass="a">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div><divclass="b">BBBBBBBBBBBBBBBB</div></div>