-webkit-line-clamp clamp child scroll container unexpectedly

Parent element with -webkit-line-clamp: n and child ScrollContainer element (with css overflow: hidden) , then this child would be clamped.

Problem: child element is clampped.

Expect: child element is not clampped.

Other browsers tested this issue:

  • Chrome: OK(not clampped)
  • Firefox: OK(not clampped)
  • Edge: OK(not clampped)

reproduce code:

<div style="display: -webkit-box; width: 200px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
  <div id="inner_err" style="overflow: hidden; background-color: red;">
    Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! Won't clamped! 
  </div>
  <div id="inner_normal" style="background-color: green;">
    Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! Clamped! 
  </div>
</div>

Behavior:

-webkit-line-clamp clamp child scroll container unexpectedly
 
 
Q