Weird sizing behaviour

I am having some issues understand the sizing behaviour of div blocks in certain cases. If you look at the project below, on the home page in “ThisSection” > “ThisBlock” > “ThisDiv” seems to be acting different to what I expect. If I set this div to say 100VW or 100% I can’t get it to actually take op 100% of the viewport width or of the parent element’s width.

I don’t actually want it to be 100% width, but it acts similarly weird at other specified widths and I thought the 100% example explains the issue most effectively.

Anyone have an idea what is happening.


Here is my site Read-Only:

If you want to Flex “This block”, you can set the parent container (This block) to wrap the elements and then set the containers to a percentage of the whole container width. When they are wrapping you can set “This Div” to 100% and have it span the whole parent, as a row.

If you want to be more specific you could use columns and under the columns option you could specify the proportions of each column. I think that will actually be the best way to achieve what you are trying to do.

Hi Victor

Thanks for helping. Unfortunately I do not want to wrap the elements. I actually want this div to be a percentage of the viewport width (anything between 65% and 85% depending on breakpoint). I could use columns, but the problem is not that I can’t achieve what I am trying to do (I can make it work by setting widths in excess of 100VW or 100%), I am just trying to understand why setting the width of “ThisDiv” to 85VW or 85% does not set it to 85% of the width of “This Block”.

It’s a flexible box. Flexbox. You should probably use something else. What exactly do you want to achieve?

If you want to understand the logic behind the behaviour, you could read this:

and this:

Thanks I will read that now. What I am trying to achieve is to have the % width value act as a % of the parent element. I.e. if I set the width of “ThisDiv” to 85% i want it to take up 85% of the width of “ThisBlock”. This does not happen for some reason.

I just found that setting the min width to 85% does in fact achieve what I want. I am still trying to understand why just setting the width property to 85% does not achieve the same effect as setting min width to 85%.

I mean, I might not get what you mean. But in this basic example below, A will always take up 85% of the container width. Even if you remove B, for example. And this is just inline-block elements with percentage based widths. Is this what you are trying to do?

B will allways sit next to A, as long as nothing pushes it down.

Yes, that is exactly what I am trying to do. Your example works as expected. However, if I try to set the width of “ThisDiv” in a similar way to what you just did it does not produce the same result. I would like to understand why?

Setting the minWidth value to 85% achieves the expected result. Setting the width to 85% does not…

I think this is above my knowledge, I can’t reproduce the problem on your share-link, for me it works as excepected. But I might also not fully understand the problem, hehe. I hope you solve this riddle.

Best of luck!

Thank you for taking the time to try to help. I really hope to get to the bottom of this as well.