CSSで、子要素の absolute が、親要素の relative を超えたい

Question

前提・実現したいこと

サジェストとして表示されるテキストを、入力ボックスの直下に表示しつつ、画面いっぱいに広げたいです。

発生している問題

入力ボックスの直下にサジェストを表示すべく、親要素をrelativeに、子要素のサジェストをabsoluteにしています。
しかし、サジェストの幅が親要素を超えられず、テキストの改行位置がその幅に制限されてしまいます。
サジェストの幅を、親要素を超えて画面いっぱいに広げるには、どうしたらいいでしょうか？

該当のソースコード

以下を実行 → https://jsfiddle.net/16wv4rna/

<p><span class="color_salmon">.input</span> に入力すると<span class="color_pink">.suggest</span> が表示される機能があり、このテキストを<br>
➀<span class="color_salmon">.input</span> の直下に表示したい<br>
②画面の右側いっぱいまで広げたい（左側は <span class="color_salmon">.input</span>  の左と同じ位置）<br>
というのが目標</p>

<br><hr><br>

<div class="boxes">

  <div class="box">
    <div class="input input1 color_salmon" contenteditable="true">apple</div>
    <ul class="suggest color_pink">
      <li>I like apples.</li>
      <li>Please put everything in apple-pie order before you leave.</li>
      <li>It’s apples and oranges.</li>
    </ul>
  </div>
  
  <div class="box">
    <div class="input input2 color_salmon" contenteditable="true"></div>
  </div>  
  
</div>

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
span {
  margin: 2px;
  display: inline-block;
}
.color_salmon {
  background: salmon;
}
.color_pink {
  background: pink;
}
.boxes {
  display: flex;
}
.box {
  margin-right: 10px;
  position: relative;
}
.input{
  width: 100px;
  line-height: 1.5;
}
.suggest{
  position: absolute;
  top: calc(1em * 1.5);
  right: auto;
  bottom: auto;
  left: 0;
}

試したこと

.boxのrelativeを外せばサジェストの幅は適切になりますが、位置が直下に来てくれません

また、JavaScriptで.inputの位置を取得して.suggestをfixedにすれば実現できますが、そこまでしなくてもできるのではないか、と思い質問させて頂きました。

お詳しい方、よろしくお願い致します。

Comments

[Lhankor_Mhy]

包含ブロックを超えるだけなら、width を設定すればいいですが、そういう話ではないのですよね？

[nikuatsu]

ありがとうございます。そうですね。画面幅は可変ですし、.inputの位置も複数ございますので、widthでは難しいのかなと思っています。

[Lhankor_Mhy]

画面幅可変は、特に問題ないような……？
vw はお試しになりました？

[nikuatsu]

>画面幅可変は、特に問題ないような……？
例えばサジェストに1000pxを指定したとき、画面幅が2000pxならサジェストが画面幅いっぱいにならず、画面幅が500pxならサジェストが隠れてしまいだろう。という考えです。

>vw はお試しになりました？
はい。ただ .input が複数あり、その左の位置は不確定です。そのため、
calc( 100vw - .inputの画面左からの位置 )
と指定しなければならならず、結局JavaScriptで測るのなら fixed の方法と同じ手間だろう。という考えです。

以上は素人の私の「考えです」なので、間違いであれば遠慮なくご指摘頂けましたら幸いです。

Answer 1

こういうことですか？

.box {
  margin-right: 10px;
  /* position: relative; */
}

.suggest{
  position: absolute;
  /* top: calc(1em * 1.5); */
  /* right: auto; */
  right: 0;
  /* bottom: auto; */
  left: 0;
}

---

別回答を追記

これではどうでしょうか？

.box {
  margin-right: 10px;
  /* position: relative; */
}

.suggest{
  position: absolute;
  /* top: calc(1em * 1.5);
  right: auto;
  bottom: auto;
  left: 0; */
  word-break: break-all;
}
.suggest::before{
  content: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
  display: block;
  height: 0;
  visibility: hidden;
}

Comments

[nikuatsu]

ありがとうございます。そちらですと
>左側は .input の左と同じ位置
が実現できなそうです。

質問はそれを踏まえて .input1 と .input2 をご用意したのですが、そちらですと .input2 へのサジェストであるにも関わらず、.input1 の左側にサジェストが来てしまうようです。

■ .input1 へのサジェスト（質問のコードと同じ）
```HTML
<div class="box">
<div class="input input1 color_salmon" contenteditable="true">apple</div>
<ul class="suggest color_pink">
<li>I like apples.</li>
<li>Please put everything in apple-pie order before you leave.</li>
<li>It’s apples and oranges.</li>
</ul>
</div>

<div class="box">
<div class="input input2 color_salmon" contenteditable="true"></div>
</div>
```

■ .input2 へのサジェスト
```HTML
<div class="box">
<div class="input input1 color_salmon" contenteditable="true"></div>
</div>

<div class="box">
<div class="input input2 color_salmon" contenteditable="true">apple</div>
<ul class="suggest color_pink">
<li>I like apples.</li>
<li>Please put everything in apple-pie order before you leave.</li>
<li>It’s apples and oranges.</li>
</ul>
</div>
```

[Lhankor_Mhy]

あー、なるほど、左側は合わせたいんですね。
把握しましたが、たぶん無理ですね。

こういう質問の時は、想定している状態をポンチ絵でも描いて提示すると、伝わりやすいような気がします。

[nikuatsu]

やはり無理ですか。無念ですが、無理だとわかって良かったです。ありがとうございました。

[nikuatsu]

↑
「やはり無視ですか」になっておりました！何度もご返信くださったのに大変申し訳ございません！
「やはり無理ですか」に修正致しました。

[Lhankor_Mhy]

かなり強引なやり方ですが、追記しました。

[nikuatsu]

こんにちは。ありがとうございます！できました。さすがです。

一点よろしいでしょうか。.suggest::before の指定はなくてもできているように見受けられますが、こちらどのような意図でご指定なさいましたか？

[Lhankor_Mhy]

そうですか、こちらではそのようにしないとダメだったのですが、それではご提示いただいていない部分に原因があるのかもしれないですね。

[nikuatsu]

妙ですね。質問のリンクに対しご回答を踏まえて修正したものがこちらです。.suggest::before の指定をせず、41行目にご回答を追加しました。
https://jsfiddle.net/zg0nexqk/

質問にある. box と .suggest を、19行目と30行目で次のように削除し
19 /* 削除 */
30 /* 削除 */

そして41行目で次のように追加しただけなのですが、
41 /* ご回答を追加 */

これで再現しませんでしょうか？

[Lhankor_Mhy]

ご提示のものでは画面いっぱいになっていませんでした。

Answer 2

[親要素を超えて画面いっぱいに広げる]の解釈が間違っていたらごめんなさい。

.boxのrelativeを外せばサジェストの幅は適切になりますが、位置が直下に来てくれません

上記の状態のサイズが理想なのでしたら、.suggestにwidth: max-contentを設定することで実現できます。

.suggest{
  position: absolute;
  top: calc(1em * 1.5);
  right: auto;
  bottom: auto;
  left: 0;
  width: max-content;
}

Comments

[nikuatsu]

ありがとうございます。そちらでは .suggest が画面幅を超えてしまうと思います。