In CSS flexbox, gap is not working with flex wrap - css

Question

Yes, this has been asked before, and I have seen it work numerous times in online examples, but I must be missing something in my attempt:
main.wrap {
display: flex;
flex-wrap: wrap;
/*flex-direction: row; the default */
gap: 10%;
}
<main class="wrap">
<div class="column">
<h3>Wrap with gap</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. </p>
</div>
<div class="sidebar">
<h3>Sidebar</h3>
<p>Nullam posuere commodo quam eget ultricies. Duis luctus, mauris at iaculis tempor. </p>
</div>
</main>
Works fine with the default of no-wrap
See it here: https://codepen.io/breadwild/pen/abWMQPB
Thoughts?

Answer 1

Look, If you put flex on the parent element, it will be applied on only its children elements, not on their grand children elements. The marked two portion are the children here. flex-gap has been created in between them.
If you want to add gaps between h3, p tags- you need either to add padding/margin or to add flex on its parent element. Hopefully it helps. Feel free to ask further questions.

Answer 2

You're trying to apply a % gap, and that unit is relative to its parent. In this case, the parent has no defined height, so this is happening:
You can define a height or use the viewport unit for height vh, like this:

Answer 3

Sorry for not understanding your question perfectly. Please replace your CSS file with the given code. I guess you are asking for it. If not, please keep asking questions-
.wrap {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 6%;
}
.column{
flex-basis: 47%;
}
.sidebar{
flex-basis: 47%;
}

Answer 4

In your wrap case your column and sidebar are wrapping into 2 rows, so there isn't a column-gap appearing as each occupies the whole width. (And there isn't a row-gap either between the 2 rows because - as mentioned in another answer - you're using a % value of a parent which doesn't have any height).
With wrap you're allowing the elements to wrap into new rows. So the browser looks at the each element, sees that there's enough text to occupy the whole line, so it allows that and places the elements on 2 rows.
With nowrap you're telling the browser to fit these 2 elements onto the same line. So the browser will do that, choosing a width for each element which makes them of a similar height, and allows the 10% gap in between.
So to get the same effect for wrap you need to constrain both elements so that they don't occupy the whole line, and don't then result in the wrap into 2 rows being applied.
You can do this by adding this CSS, for example:
.column {
max-width: 60%;
}
.sidebar {
max-width: 30%;
}