固定位置から画面幅に合わせて伸びる要素を実装したいです

Question

下記画像のようなコーディングをしたいです。

固定幅1080px内にテキストを入れて、帯が画面幅の端合わせて伸縮させたいです。
他の要素のレイアウトの都合上、テキスト部分は固定幅1080pxの
黄色のコンテンツエリアをposition: relative;とし、ピンクのテキスト部分はposition: absolute;にして位置を固定しています。

**HTML**

<div class="main"> 固定幅エリア
　<div class="text">　固定幅以内のテキストエリア
　　テキスト
　</div>
　<div class="side"></div>　伸ばしたい帯
</div>


**CSS**

.main {
  width: 1080px;
  position: relative;
}

.text {
 width: 300px;
height: 200px;
position: absolute;
top: 20px;
right: 0;
}

.side {
ここの部分をどうすればいいのかわかりません。
}

試したこと
・テキスト部分と帯の部分をflexにし、テキスト部分は固定幅、帯部分(side)はflex: 1;にして固定部分と可変部分のあるボックスにし、固定幅が親要素なので、帯部分は消えてしまうので、ボックスに

margin: 0 calc(50% - 50vw);

を設定しましたが、sideが消えてしまいました。

これ以外に何かいい方法はないかなどずっとググってますがなかなか
答えが見つからず質問に至りました。

ご教授いただけると幸いです。

Comments

[recal]

テキストは固定幅以上には伸びないのでしょうか？

[kumamoku]

テキスト部分はテキスト以外の帯は伸びても大丈夫なのですが、固定幅以内にテキスト内容が来るように
したいです。どんな画面幅でも固定の1080px以内にテキスト部分があるようにしたいです。
説明が下手ですみません。

Answer 1

試しに作ってみました。

以下の理由から実際に使うにはjsが必要なんじゃないかなと思います

• テキストブロックの高さを可変にできない
• 擬似要素に上限があるのでテキストブロックは2つまでしか作れない？

まず画像幅に合わせて伸びる部分のサイズを計算します。
calcを使って
コンテンツ領域内に表示されるテキストブロックのwidthと
コンテンツ領域外のwidthを算出して
コンテンツブロックの疑似要素に指定します。

width: calc(100% - 70%) + (100vw - 1024px) / 2;
(1080pxではなく1024pxで書いてます。

あとは疑似要素とテキストブロックのabsolute位置を同じにして重ねる感じです。

<div class="parent">
  <div class="child">
    <p>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん
  </div>
</div>

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.parent {
  height: 100vh;
  width: 1024px;
  margin: auto;
  background-color: plum;
  position: relative;
}
.parent::after {
  content: "";
  position: absolute;
  width: calc((100% - 70%) + (100vw - 1024px) / 2);
  height: 140px;
  top: 30px;
  left: 70%;
  background: tomato;
  z-index: -1;
}

.child {
  position: absolute;
  width: calc(100% - 70%);
  height: 140px;
  top: 30px;
  left: 70%;
  background: linear-gradient(to right, olive, tomato);
}
p {
  padding: 1em;
}

検証用codepen

Comments

[kumamoku]

丁寧にご回答いただきありがとうございます！
私もcalcを使ったりもして試していたのですが、このようにいかなかったので、何かコードが
違ったと思います。
jsは使用せずの実装だったため、ちょっと頭を悩ませていましたが、無事解決いたしました。

回答を待っている間に、以下も試してみました。
固定幅コンテンツ外にwidth:100%のエリアを作り、テキストエリア自体もwidht:100%にした後、
marginにマイナス％を指定したらなんとなーくの形はできましたが、ウィンドウ画面によっては
多少ずれが生じるためrecal様のご教授いただいた内容で実装試してみます！
ありがとうございました！！

[kumamoku]

無事に解決いたしました。
ご回答ありがとうございました！