Flexbox overflowing out of parent div - css

Question

I have a nested flexbox situation. The first one is to establish two responsive columns:
.ColWrap,
{
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 50px 10px 50px 25px;
display: flex;
flex-wrap: wrap;
}
.ColWrap .col,
{
flex: 1;
padding: 20px 20px 20px 0;
margin: auto;
}
#media screen and (max-width: 600px) {
.ColWrap {
flex-direction: column;
}
.ColWrap .col,
{
width: 100%;
padding-left: 0;
}
}
The second is a series of what I'm called "nuggets" inside the right column. These should wrap as necessary:
.nuggetHolder {
width: 100%;
margin: 20px;
display: flex;
flex-wrap: wrap;
}
.nugget {
flex: 0 1 40%;
margin: 10px;
padding: 10px;
border: 2px solid rgba(0,0,0,.2);
}
Putting it together looks like this:
<div class="ColWrap">
<div class="col">
<h2>Left-hand text</h2>
</div>
<div class="col">
<div class="nuggetHolder">
<div class="nugget">Nugget NuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
</div>
</div>
The problem I am having is that the nugget with all the text is overflowing outside the container.
Do you think I should set up the 2-column container as a grid and then each "nugget" as a flexbox?

Answer 1

Use word-break: break-word;
word-break: break-word; keep all the text in the size the div already have.
for looking good I add:
flex-grow: 1; in .nugget - it also like change flex: 0 1 40%; to flex: 1 1 40%;
and in .nuggetHolder I replace the margin in padding and add box-sizing: border-box; that calculate the box size with border and padding, and it not break with scroll-x.
.ColWrap,
{
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 50px 10px 50px 25px;
display: flex;
flex-wrap: wrap;
}
.ColWrap .col,
{
flex: 1;
padding: 20px 20px 20px 0;
margin: auto;
}
#media screen and (max-width: 600px) {
.ColWrap {
flex-direction: column;
}
.ColWrap .col,
{
width: 100%;
padding-left: 0;
}
}
.nuggetHolder {
width: 100%;
// margin: 20px;
padding: 20px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.nugget {
flex: 0 1 40%;
margin: 10px;
padding: 10px;
border: 2px solid rgba(0,0,0,.2);
word-break: break-word;
flex-grow: 1;
}
<div class="ColWrap">
<div class="col">
<h2>Left-hand text</h2>
</div>
<div class="col">
<div class="nuggetHolder">
<div class="nugget">Nugget NuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
</div>
</div>

Answer 2

Add the following to .nugget:
max-width: 40%;
overflow-wrap: break-word;
To center it add justify-content: center to .nuggetHolder.
Added max-width so that any overflowed content, i.e. over 40% will be consistent.