Css Flexbox从父div溢出

我有一个嵌套的flexbox情况。第一个是建立两个响应柱：

.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;
    display: flex;
    flex-wrap: wrap;
}

.nugget {
    flex: 0 1 40%;
    margin: 10px;
    padding: 10px;
    border: 2px solid rgba(0,0,0,.2);
}

把它放在一起看起来像这样：

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

左手文本
Nugget NuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnugget
金块
金块
金块
金块
金块

我遇到的问题是，包含所有文本的金块溢出容器外。

---

您认为我应该将2列容器设置为网格，然后将每个“nugget”设置为flexbox吗？

将以下内容添加到

。nugget

：

最大宽度：40%；
溢出包装：断开单词；

要使其居中，请将

justify content:center

添加到

.nuggetHolder

添加了

max width

，以便任何溢出的内容，即超过

40%

的内容将保持一致。

使用

分词：分词
断字：断字将所有文本保持在div已有的大小

为了好看，我加上：

flex-grow:1在
.nugget
-它也像change
flex:01 40%到
flex:140%

在
.nuggetHolder
中，我替换了填充中的边距，并添加了
框大小：边框框
使用边框和填充计算长方体大小，并且不会使用scroll-x中断


.ColWrap，
{
宽度：100%；
框大小：边框框；
背景色：#fff；
填充：50px 10px 50px 25px；
显示器：flex；
柔性包装：包装；
}
.ColWrap.col，
{
弹性：1；
填充：20px 20px 20px 0；
保证金：自动；
}
@媒体屏幕和屏幕（最大宽度：600px）{
ColWrap先生{
弯曲方向：立柱；
}
.ColWrap.col，
{
宽度：100%；
左侧填充：0；
}
}
.掘金工{
宽度：100%；
//利润率：20px；
填充：20px；
显示器：flex；
柔性包装：包装；
框大小：边框框；
}
金块先生{
弹性：01 40%；
利润率：10px；
填充：10px；
边框：2倍实心rgba（0,0,0,2）；
断字：断字；
柔性生长：1；
}

左手文本
Nugget NuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnuggetNuggetnugget
金块
金块
金块
金块
金块
您不必使用
最大宽度：40%
我想说，当您希望使
.nuggetHolder
内的所有东西的边界/大小x轴保持一致时，建议您使用40%的弹性基准。/*三个值：弹性增长|弹性收缩|弹性基础*/flex:210%@Omer您在使用
分词
时是对的，但是对于
溢出包装
来说，它并没有像预期的那样工作。也就是说，
wordbreak
似乎是更好的方法。在进一步的测试中，我更喜欢我的解决方案，因为它使列大小在并排时变得动态