CSS: overflowで子要素がはみ出てしまう

Question

HTMLで最大2つの子要素を持つ親要素があります
親要素をはみ出る子要素を途中で消したいのですが、消えません

考えられる原因としては、はみ出てしまう子要素の一部のみが親要素からはみ出ているからというのがありますが、どうなのでしょう

どなたかご教授いただけると幸いです

コードは以下の通りです

<!-- jinja2 -->
<div class="parent">
  {% if children[0] != null %}
  <p class="child">#{{ children[0] }}</p>
  {% endif %}
  {% if children[1] != null %}
  <p class="child">#{{ article.children[1].tag.name }}</p>
  {% endif %}
</div>

.parent {
  display: flex;
  height: 20px;
  overflow: hidden;
}

.child {
  font-size: 5px;
  margin: 0;
  margin-left: 10px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
}

Comments

[firegrape]

えーと、if文を入れていると思いますが、
if文の制御方法が間違っているからではないということでしょうか？
それともif文の制御の仕方を聞いている感じでしょうか？

あと、「はみ出る」とおっしゃってるのはpタグのことですか？

[_dana]

質問が不十分でした。
if文での処理は正常に行われています。

おっしゃる通りで、取得したデータによっては2つめのpタグが親要素を超えてしまうんです。
たとえば、article.children[1]に' Hello World 'という文字列が入っている時、後半の' orld 'の部分がはみ出る感じです。

[firegrape]

なるほどです。
であれば、pタグのwidthを広げればいいのでは？

[hatena19]

当方でサンプルを作成して確認してみましたが、はみ出るという現象は確認できませんでした。

実際に出力されているHTMLコードとCSSコードで現象の再現できるものを提示してもらえますか。

[_dana]

@firegrape さん
それは試してみましたがうまくいきませんでした

@hatena19 さん
ありがとうございます
htmlを以下のように修正していただくとご確認いただけるかと思います
2つめの子要素がはみ出てしまいます
<div class="parent">
<p class="child">テストテストテストテストテスト</p>
<p class="child">テストです</p>
</div>

[Lhankor_Mhy]

はみ出る、というのは、垂直方向ですか？　水平方向ですか？

[_dana]

水平方向にはみ出てしまいます
こちらイメージ画像になります
https://gyazo.com/8b8388f0372718b9edcb8e2809be7315

[Lhankor_Mhy]

再現しません。

サンプルを作りました。
https://jsfiddle.net/Lhankor_Mhy/hv1gqye8/

---

.parent は width:auto なので、親要素の影響じゃないかと思いますよ。

とにかく、問題が再現するコードをご提示ください。
問題が伝わらなければ、解決につながる回答は得られないと思います。

[_dana]

ありがとうございます。
親要素がwidth: autoであることが原因でした。
さらに上の親要素のwidthを指定すると解決しました。

回答の方にご記入いただければベストアンサーとさせていただきたいです。

[Lhankor_Mhy]

ご解決されて何よりです。
お手数ですが、自己解決ということで処理をお願いします。
https://teratail.com/help#resolve-myself

[_dana]

ありがとうございます。

Answer 1

Lhankor_Mhyさんのアドバイスにより
親要素のさらに上の要素にwidthを指定すると解決しました

.ancestor {
  width: 181px;
}

.parent {
  display: flex;
  height: 20px;
  overflow: hidden;
}

.child {
  font-size: 5px;
  margin: 0;
  margin-left: 10px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
}