内部divを右寄せしつつ、全体の幅を揃えたい

Question

下記の名前・部署の幅を青色の線のように揃えながら右寄せしたいです。

モダンブラウザに対応できればよいので、flexboxで実現しようとしたのですが長さを固定にする以外、うまく実装できませんでした。

jQueryで計算せず、CSSだけで実装することは可能でしょうか？

<article>
  <div class="content">たひてぞぽぞばれぐてひろどにらぼもぎゎぃそんつぢゅぴぢにどくぁぶはぇきぼねおひろ</div>
  <div class="flex">

    <div class="flex-bottom flex-calc">
      <p>八木 歓菜</p>
      <p class="gray">部署 4</p>
    </div>
    
    <div class="flex-bottom">
      <p>ここは固定長のアイコンが入ります。</p>
    </div>
  </div>
</article>

<article>
  <div class="content">ぷゎょゎぼむべぁうくれげゑうぃちぽびぽじふすらざまぴせぴろとぜげゎぜこをあこでべ</div>
  <div class="flex">

    <div class="flex-bottom flex-calc">
      <p>安達 和樹</p>
      <p class="gray">部署 4</p>
    </div>

    <div class="flex-bottom">
      <p>ここは固定長のアイコンが入ります。</p>
    </div>
  </div>
</article>

<article>
  <div class="content">ぅひみぺつぇげでいぎみがちぢかひげずふをけぬそへられべゑやまぇげかぷい</div>
  <div class="flex">

    <div class="flex-bottom flex-calc">
      <p>泉 恵華</p>
      <p class="gray">部署 2</p>
    </div>

    <div class="flex-bottom">
      <p>ここは固定長のアイコンが入ります。</p>
    </div>
    
  </div>
</article>

*Railsで構築しており、人名などはDBから取得します。
*人名・部署名などはGemを利用しランダムで作成しております。

article,textarea {
    text-align: left;
    padding: 15px 25px 15px 15px;
    border-radius: 10px;
    margin: 0 auto 15px auto;
    width: 95%;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    background: #fff;
    min-height: 100px;
    border: 1px solid #d9d9d9 !important;

    .field_with_errors &{
        border: 1px solid #ff2667 !important;
        box-shadow: 0 5px 10px rgba(255,38,103,0.3);
    }
    p {
        margin: 5px 0;
        font-size: 0.875rem;
    }

    .content {
        margin-bottom: 10px;
    }

    .flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;

        .flex-calc {
            margin-right: 30px;
        }

        .flex-bottom {
            -ms-grid-column-align: end;
            align-self: flex-end;
        }
    }

    .gray {
        color: #757575;
    }
}
コード

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/）を質問文に追記されたほうが回答を得やすいと思います。

[yambejp]

ソースを提示ください
inner は中身が無いのでしょうか？
innerの幅は何を前提にきめるのですか？

[no1knows]

失礼しました。修正と追記をさせていただきました。

[hatena19]

画像は理想図ではなく、名前・部署 を青色の線に揃えたいということでしょうか。
で幅は固定ではなく、ランダムに抽出された名前・部署名の最大長に合わせるということでしょうか。

[no1knows]

hatena19さん、おっしゃるとおりです。

Answer 1

Subgrid を使うことでテーブルレイアウトのようにデザインすることができます。

.container {
  display: grid;
  grid-template-columns: 1fr minmax(100px, max-content) 120px;
}

.container article {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

.container article > * {
  grid-column: 1 / -1;
}

.container article .flex {
  display: contents;
}

.container article .flex > *:first-child {
  grid-column: -3 / -2;
}

.container article .flex > *:last-child {
  grid-column: -2 / -1;
}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid
Firefox のみ。

入れ子が多いと複雑になるので、とくにこだわりがなければ決め打ちでもいいのではないかと思います。

Comments

[no1knows]

ありがとうございます。
Firefox以外もこのような実装ができるようになるとシンプルで美しいですね！

Answer 2

Flexboxでは無理っぽい。

CSS Grid の出番かな。

とりあえず、下記のような感じ。

<main>

  <div class="box"></div>
  <div class="content">たひてぞぽぞばれぐてひろどにらぼもぎゎぃそんつぢゅぴぢにどくぁぶはぇきぼねおひろ</div>
  <div class="box-bottom">
    <p>八木 歓菜</p>
    <p class="gray">部署 4</p>
  </div>
  <div class="icon-bottom">
    <img src="http://placehold.jp/80x80.png">
  </div>
  
  <div class="box2"></div>
  <div class="content2">ぷゎょゎぼむべぁうくれげゑうぃちぽびぽじふすらざまぴせぴろとぜげゎぜこをあこでべ</div>
  <div class="box-bottom2">
    <p>安達 和樹</p>
    <p class="gray">部署 4</p>
  </div>
  <div class="icon-bottom2">
    <img src="http://placehold.jp/80x80.png">
  </div>
  
   <div class="box3"></div>
  <div class="content3">ぅひみぺつぇげでいぎみがちぢかひげずふをけぬそへられべゑやまぇげかぷい</div>
  <div class="box-bottom3">
    <p>泉 恵華</p>
    <p class="gray">部署 2</p>
  </div>
  <div class="icon-bottom3">
    <img src="http://placehold.jp/80x80.png">
  </div>

</main>

main {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  grid-template-rows: auto auto auto auto auto auto;
  grid-gap: 5px;
}

.content {
  padding: 15px 25px 15px 15px;
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}

.box-bottom {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.icon-bottom {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.box {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
  border-radius: 10px;  
}

.content2 {
  padding: 15px 25px 15px 15px;
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}

.box-bottom2 {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}
.icon-bottom2 {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}

.box2 {
  grid-column: 1 / 4;
  grid-row: 3 / 5;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
  border-radius: 10px;  
}

.content3 {
  padding: 15px 25px 15px 15px;
  grid-column: 1 / 4;
  grid-row: 5 / 6;
}

.box-bottom3 {
  grid-column: 2 / 3;
  grid-row: 6 / 7;
}
.icon-bottom3 {
  grid-column: 3 / 4;
  grid-row: 6 / 7;
}

.box3 {
  grid-column: 1 / 4;
  grid-row: 5 / 7;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
  border-radius: 10px;  
}

Codepenサンプル

時間がないので余白とか、冗長な部分はそのままなので、これをたたき台にしてみてください。

Comments

[no1knows]

ご回答いただきありがとうございます。
質問を追記というか大幅に修正させていただきました。
画像まで貼っていただき本当に申し訳ありません。。。

[no1knows]

ありがとうございます。
理解に時間がかかったのですが、HTML全体をテーブルと見立てていたんですね。
そして<div class="box"></div>で1つのまとまりを表現するという流れですね。

SCSSの@forを利用すればシンプルになりそうなのでこの案を採用させていただきます。
ありがとうございます！