CSS:‏ max-width לא עובד בכל מקרה?

[yossiz]

שאלה עמרצית‏
אני מסתכל בכתבה באיזה אתר ומפריע לי שהכתבה רחבה יותר מהמסך, אחרי חיפוש מצאתי שזה נגרם מכך שיש תמונה שרוחבה יותר מרוחב האלמנט האבא. (תיקנתי את זה על ידי הגדרה של max-width: 100% על ה-img, איזה עוד דרכים יש לתקן בעיות כאלו?)

יש לי כמה שאלות:
א) מהי הדרך הקלה לדבג בעיות כאלו? (אני הגעתי לאלמנט הסורר על ידי ניסוי וטעייה של מחיקת אלמנטים אחד אחד לראות איזה מהם גורם לבעיה... האם יש דרך קלה יותר? אולי משהו ב-JS?, תוסף? איזה תכונה של כלי המפתחים שאני לא מכיר?)

ב) למה הילד יכול לגרום לאבא לקבל רוחב יותר ממה שהוקצב לו,
הבעיה נשארת בעינה למרות שבאבא מוגדר:

width: 100%;
max-width: 100%;
overflow: hidden;
// ניסיתי אפילו:
width: 0;
max-width: 0;

לא עוזר שום דבר... ‎‏

(עיין בדף עם הבעיה כדי לראות את הקוד)

[yossiz]

עדכון: בעזרת חבר יש לי תשובות חלקיות.

א) פתרון חלקי: בדף הנ"ל אפשר להריץ את זה בקונסול למצוא את האלמנט הסורר:

$$('*').filter(el => el.width > 1000)

ב) תשובה חלקית: הגדרת overflow: hidden עובד רק על block elements. ואכן אם
נגדיר את זה על ה-p הסבא של ה-img, וניתן לו רוחב קבוע, אז התמונה לא יגלוש מחוץ לו. (אלמנטי table לא מוגדרים כ-block)
אני עדיין לא מבין למה width: 100% לא מונע את גלישת התמונה.

[yossiz]

@yossiz אמר בCSS:‏ max-width לא עובד בכל מקרה?:

אני עדיין לא מבין למה width: 100% לא מונע את גלישת התמונה.

נראה לי שהבנתי, מכיון שזה בתוך טבלה, ובברירת מחדל העמודה של הטבלה מקבל את הרוחב של האלמנט הכי גדול שבתוכו.
table-layout: fixed יכול להיות פתרון לזה

[yossiz]

המחשת הבעיה (אני כבר יודע פתרונות, אני רק מביא את זה להמחיש את הבעיה):
https://jsfiddle.net/j5y1b0x6/
איך לגרום לטקסקט לא לגלוש מעבר לגבולות הדף בלי להקטין את ה-width של התמונה.