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.
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.
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”.
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.