why extra width occurring while resizing inline-block elements

Asked Jan 30 '18 at 21:36

Active Jan 30 '18 at 21:36

Viewed 81 times

I have placed some items in a row using display:inline-block and applied a white background to the parent div. In desktop mode the white background is not visible as all items in a row.

But when I resize the window the ...inner elements... goes to the next line which is fine, but the extra white background is occurring which is the parent background color.

So my question is while I have given display:inline-block to the parent row, why it is taking 100% width....not the total width of the inner elements.

Fiddle Link

_{Note: I have created a fiddle link so that it will be easy to resize the result window. Try to resize the result window you will see the issue. I have also tried the Flexbox option but same issue is there too.}

asked Jan 30 '18 at 21:36

Bhuwan

16,525
5
34
57

i know two duplicates but not easy to find them :) – Temani Afif Jan 30 '18 at 21:45
@TemaniAfif I am also searching for a solution for too many hours...but no success...:( – Bhuwan Jan 30 '18 at 21:47
the issue is that there is no solution as this is a normal behavior and am trying to find the questions where you will understand that this normal and you can do nothing – Temani Afif Jan 30 '18 at 21:48
https://stackoverflow.com/questions/48041162/inline-block-word-was-wrapped-but-extra-space-in-the-right-side-left – Temani Afif Jan 30 '18 at 21:53
https://stackoverflow.com/questions/47479571/how-to-center-block-of-inline-blocks – Temani Afif Jan 30 '18 at 21:54
I found them :) – Temani Afif Jan 30 '18 at 21:54
Is there any solution using flex – Bhuwan Jan 30 '18 at 22:01
The problem is explained here: https://stackoverflow.com/a/37413580/3597276 – Michael Benjamin Jan 30 '18 at 22:02
even with flex there is no real solution but you can always find a workaround, like i did in this question https://stackoverflow.com/questions/47479571/how-to-center-block-of-inline-blocks where i modfiy the width of the element a bit so they always fit the size of the container. or consider JS for this – Temani Afif Jan 30 '18 at 22:04

why extra width occurring while resizing inline-block elements

0 Answers0