DIV box の外枠の幅に合わせて、内側の box の幅を自動的に最大化する方法

Question

図のように、緑の外枠の幅が、固定値で指定できない場合に
内側の　ピンク色の div box の幅を
赤枠以外の残った幅をすべて埋め尽くすために
どのようにコードすれば良いか
分からずに困っています。

よろしくお願いいたします。

赤枠と　ピンク色の box の間に、すき間を入れてはならないため
nowrap が使用できません。

このパーツを複数個所で使用するため
position 指定をすることもはばかられます。

flex を試してみましたが、勝手に改行するため
安定した使用が難しいように思えました。

<div class="out" >
	<div class="box1" >
	</div
	><div class="box2" >
	</div>
</div>

box2 が、右側のピンク色の部分となる予定です。

Comments

[yoshinavi]

内容的に前の質問と同じ質問なのでは？

[akihiro3]

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

[azuapricot]

あなたの質問一つも解決済みになっているものがないのですが、解決したかどうかを伝えるのも礼儀ですよ。
似たような質問を何度もするのも以前の回答者に失礼です。
回答してくれたコードを実際に使用してみて、動かなかったらコメントで今の状況を報告、
無事に動いたのであれば一番有用だった回答をベストアンサーにして質問を締めてください。

Answer 1

.out {
  display: flex;
  border: 1px solid green;
  height: 80px;
}

.box1 {
  flex-basis: 100px;
  border: 5px solid red;
}

.box2 {
  flex-grow: 1;
  background-color: pink;
}

Answer 2

これでイメージと同じような画面が表示されました。

.out{
  width:400px;
  height:80px;
  display:block;
  border:solid 1px green;
}
.box1{
  position:absolute;
  width:50px;
  height:50px;
  display:block;
  border:solid 3px red;
  background-color:white;
}
.box2{
  width:100%;
  height:40px;
  display:block;
  background-color:pink;
  margin-top:35px;
}

ここで試してみてください
.outのwidthを広げると、.box2も広がります。