wrap nested column-directional flexbox without overlapping

[imahdio]

based on this codepen example I'm going to experiment with auto wrapping of flex-container2,3,4 once change the height of flex-item WITHOUT intersect with the bottom part of flex-item like this:

bad results	good and expected results

the problem is:

flex-direction: column;	flex-direction: row;
flex-item doesn't fully consider to height of innier contents which cause overlapping contents with bottom border of flex-container this probelm only occures if add additional text inside flex-item!	flex-item take absolutly the actual height of innier contents into account yellow flex items be wrapped once resize the viewport without any overlapping
related codepen example	related codepen example

for this problem, my study friends and me found 3 hack but not a solution yet. becaus

• manually changed the height of inneir contents based height of outer container
• instead of, expecting the flex-item to auto wrap around the innier contents properly

hack1	hack2	hack3
use height: 85%; instead of height: inherit; in each one of .flex-container2, 3, 4 like this codepen example	set height: fit-content; inside flex-item and height: 8em; inside flex-container2 ,3 ,4 like this codepen example	use height: calc(100% - 15px); codepen example tnx RAJA KALLA for suggesting this hack

HERE is what I expect to be occured just like row-directional state flex-container2,3,4 in column-directional state , look at actual height of outer container and without any hack, take a proper figure based upon height of outer container without overlapping. what's your solution and opinion about this issue?

[DevanshThakkar]

Hello, That div is going outside the container because of the text written. That text does not have any class so it can't decide where to be placed and so it takes the static position. https://prnt.sc/26tpyss If you remove that text, that will be placed perfectly. Hope it helps. Thanks.

[imahdio]

Hello, That div is going outside the container because of the text written. That text does not have any class so it can't decide where to be placed and so it takes the static position. https://prnt.sc/26tpyss If you remove that text, that will be placed perfectly. Hope it helps. Thanks.

but that explanatory text doesn't effect on flexbox bounderies plz fork that codepen example into your free codepen account and remove those mentioned and share the final successful results with us tnx

[DevanshThakkar]

That text just sits there like a stone because it has no class or properties and that results in that flexbox going outside

https://codepen.io/devanshthakkar/pen/eYeRzjB

[Muhammad-Fardin]

Try Reducing Padding By 3-4px and Font Size 1px

[imahdio]

Try Reducing Padding By 3-4px and Font Size 1px

fork it on your free codepen accoutn and share the successful results with others

[imahdio]

That text just sits there like a stone because it has no class or properties and that results in that flexbox going outside

https://codepen.io/devanshthakkar/pen/eYeRzjB

although I did not aware of affect of first div paragraph and you denoted it very smartly but flex-item area still doesn't consider the actual size of its inner content

[DevanshThakkar]

Why don't you increase the height of the primary container? I think it will help. https://codepen.io/devanshthakkar/pen/eYeRzjB

[karungokihara]

The issue here is on the sizing of the division. We can use customized size of the section holding the information by setting the height and width. This will help in ensuring that the text stays within the given box. Additionally we can consider using the float: left; on the code to keep all the information on the section to always float on left since you seem to have two divisions.

Another option is using the text padding which removes the content from the sides and make them visible. Example using Padding: 3px auto; https://codepen.io/karungokihara/pen/yLPoPLw

[karungokihara]

The issue is on the flex overflow on the given issue. In order to solve that we can change the heights from the flex containers. I have attached the code as below: https://codepen.io/karungokihara/pen/yLPoPLw

[ruzikulovdeveloper]

first open the main div and then open the two divs and work with them then it will be easier