DIV box の幅寄せの方法が分かりません

Question

外箱の中に一列に並んでいる箱の中の
一番、右側の箱の幅を
自動的に、外枠の中がいっぱいになるよう
最大幅をとらせたいのですが
方法が分かりません。

緑色の外枠の内側にある、ピンク色の box の幅を
左側の赤枠の隣側の空白を
すべて埋めるように
自動的に設定したいのですが
どのようにしたら良いのでしょうか。

緑色の外枠の幅が、設定変更が多い状況のため
個別ユーザーごとに
右側のピンク色の box の幅を固定値で指定することが
できません。

上の図では、内側の箱のあいだに空白が入ってしまうため
下の図のような完全に外枠の幅いっぱいが埋まる方法が必要です。

これまで試してみて、うまく行かなかった方法として

table による改行防止方法　
--> 内側の箱の間に空白が入ってしまう

max-width を右側の箱に指定する
--> 改行してしまう

右側の箱の内側に、inline でない div を入れる
--> ピンクの箱自体が inline-block なため
内側の div が、外枠いっぱいに広がらず

以上、よろしくお願いします。

<div class="out" >
	<div class="inL" >
	Left
	</div>
	
	<div class="inR" >
	Right
	</div>
</div>

```css
.out > div {
	display: inline-block;
	white-space: nowrap;
}
.out { 
	width: 200px;
    border: thin solid green;			
}
.inL {    
	width: 70px; height: 50px;
    border: thin solid red;			
}
.inR { 
	width: auto; height: 50px;
	background-color: pink; 
} 

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、試されたコードそれぞれを提示していただけませんか？

[x_x]

これとは違うのでしょうか？
https://teratail.com/questions/170504

過去の質問を見てもいずれも放置なので、終わらせるつもりがないということなのでしょうか？
https://teratail.com/questions/161090

Answer 1

.out {
  display: flex;
}

.out > .inR {
  flex-grow: 1;
}

Comments

[xmg]

長いこと分からずにいた難題に、とても簡潔明快な答えをお教えいただき、心よりお礼を申し上げます

Answer 2

下記3パターンのいずれかでどうでしょうか？
display: flex;を使う
max-widht時、overflow: hidden;を使う
width:calc();を使う

Comments

[xmg]

ご指導をありがとうございました。
さらに詳しい図を投稿いたしますので
よろしくお願いいたします。

[akihiro3]

質問文は編集できます。
同じ質問を複数投稿しないでください。