<!DOCTYPE html>
<html>
<body style="height: 100vh">
<div style="display: inline-flex; flex-wrap: wrap; border-style: solid">
<div style="width: 100px; height: 100px; background-color: #FF0000"></div>
<div style="width: 100px; height: 100px; background-color: #00FF00"></div>
<div style="width: 100px; height: 100px; background-color: #0000FF"></div>
</div>
</body>
</html>
If you take that example and if you set your body width more than 300px, there is no problem. As you can see:
But if I for example make my screen width 200px in a responsive view, of course it causes wrapping, and my items look like this:
As you can see, my flexbox container takes width of parent again, as not behaving like inline flexbox. Why it becomes behaving like not inlined after it wraps its children? How can I make it take size of the children again after it gets wrapped as well?
What I'm just trying to achieve is to make my flexbox takes size of its children as what an inline container do.
