inline-blockの要素を右寄せする方法

幅をwidthで最初から指定せずに、文字列の長さに応じて動的に変更したい場合は、

display:inline-block;

を追加すればいいんですが、これだと、

margin-left:auto;
margin-right:0px;

のような形で右寄せすることができません。今回はその解決メモです。
解決方法は、大枠のブロックで何重か囲って、

margin-left:auto;
margin-right0px;

を複数回繰り返すことです。

以下、具体的なコード。

■CSS部分

body{
 margin:0;
 padding:0;
}

.frame{
  width:100%;
  height:auto;
  border:solid 1px #000;
}

.right-justification-outer-block{
  display:flex;
  border: solid 1px #0000FF;
  max-width:350px;
  margin-left:auto;
  margin-right:0px;
}

.right-justification-inner-block{
  display:flex;
  flex-direction:row;
  align-items:center;
  margin-left:auto;
  margin-right:0px;
}

.text-parts{
  border-radius:20px;
  padding:8px 12px;
  background-color:#ffc0cb;
  max-width:300px;
  display:inline-block;
  word-wrap:break-word;
}

.icon-parts{
  margin-left:10px;
}

.icon-circle{
  border:solid 1px #000;
  border-radius:50%;
  width:20px;
  height:20px;
}

■HTML部分

<div class="frame">
  <div class="right-justification-outer-block">
    <div class="right-justification-inner-block">
       <div class="text-parts">
         ここにテキストが入ります
       </div>
       <div class="icon-parts">
         <div class="icon-circle"></div>
       </div>
    </div>
  </div>
</div>

ポイントは、right-justification-outer-blockのdisplay:flex;部分で、これがない場合、text-partsの幅が300pxを切っている場合、左に寄ってしまい、ある場合は、きちんと右寄せのままになります。

■参考リンク
css – ブロックレベルから文字がはみ出してしまう – memorandum-plus
CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方