Have you ever wondered why inline elements tend to overflow while inline-block elements wrap to the next line? It's confusing because inline-block is essentially just like inline with editable height and width properties, yet their wrapping behavior differs. Is there any reliable source where I can find more information on this peculiar behavior? I've searched for documentation but couldn't find anything that explains it.
Interestingly, when I change the word-wrap behavior to "break-word" for the containing div, both types of elements behave identically.
For a visual example, check out these links: https://i.sstatic.net/GKALh.png
export default function App() {
const arr = new Array(50).fill("inline");
const arr2 = new Array(50).fill("inline-block");
return (
<div className="App">
{arr.map((text) => (
<div className="inline-div">{text}</div>
))}
{arr2.map((text) => (
<div className="inline-block-div">{text}</div>
))}
</div>
);
}
.inline-div {
display: inline;
color: red;
}
.inline-block-div {
display: inline-block;
color: blue;
}
.App {
background-color: lightblue;
}