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: