Html 如何通过it防止flex div的宽度增长'；什么内容？

我已经用flex创建了一个嵌套的div，我想在grow和shrink中遵循flex规则，但是当内部文本或内容变长时，div就会变长。在这个提琴中，我用标记为“这是一个bug”，正如您所看到的，这个div中的文本比其他的长，父flex div的增长是我不希望的。我设置

flex:1自动我不知道哪里需要更改。谢谢你的建议

Fiddle:
正如我在评论中所说，我使用了静态最大宽度，因为我认为这是一个很好的解决方案

css

html, body {
    direction: rtl;
    font-family: 'Times New Roman';
}

.WholeDiv{
    margin-right: 20px;
    margin-left: 20px;
    background-color: #ffffff;
    border: 2px solid #e8e8e8;
}

.mainContainer{

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;

    background-color: blue;
    min-width: 512px;

    height: 232px;
    line-height: 232px;

    z-index: 999;

    text-align: center;
    top: 0px;
    width: 100%;
}

.mainContainer .firstContent {
    flex: 1 1 auto; 
    background: green;
    overflow: hidden;
    min-width: 140px;
    text-align: right; 
}

.mainContainer .secondContent {
    width: 232px;
    min-width: 232px;
    background-color: aqua;
}

.mainContainer .thirdContent {
    flex: 1 1 auto; 
    background-color: red;
    overflow: hidden;
    min-width: 140px;
    text-align: left;
}

.mainContainerVert{

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;


    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;


    -webkit-box-pack: space-around;
    -moz-box-pack: space-around;
    -ms-flex-pack: space-around;
    -webkit-justify-content: space-around;
    justify-content: space-around;

    -webkit-flex-flow: column no-wrap;
    flex-flow: column no-wrap;    



    -webkit-align-content: center;
    align-content: center;

    background-color: blue;
    /*min-width: 100px;*/
    height: 232px;
    line-height: 232px;
    text-align: center;
    max-width: 100%;
}

.mainContainerVert .dvRow{
    flex: 1 1 auto;
    background-color: black;
    color: white;
    height: 32px;
    line-height: 32px;
    max-height: 32px;
    width: 98%;
    max-width: 300px;
    /*min-width: 100px;*/
    text-align: center;   
    white-space:nowrap;
    display: flex;
}

SPAN{
    /*flex: 1 1 auto;*/
    background-color: orange;
    text-align: center;
    text-overflow: ellipsis;
    width: 300px;
    max-width: 300px;
    /*min-width: 100px;*/
    overflow: hidden;
    /*white-space: no-wrap;*/
    margin: 0 auto;
}


同时从
span
flex:1自动删除。我觉得没必要。
你是说这样的吗？@Alek我试图用百分比表示最大宽度，但我认为你是对的，我必须为它设置准确的长度。我添加溢出：隐藏；一些有用的叙述，我会尽快更新。你能告诉我你为什么用换行符吗；因为我不想显示溢出。确切地说，我需要.dvRow或内部span-wide本身来填充空间，但不要更改。要显示的firstContent和.thirdContent在内部文本中不相等。无法执行静态值。如果我们不能解决这个问题，这是很好的，但这是我真正的解决办法。如果你能做到这一点，我将不胜感激，并将此标记为答案。再次感谢。我不明白你说的“dvRow或内部跨度自身宽以填充空间但不改变”的确切意思。什么空间？和“.thirdContent作为显示不平等的内部文本”：）你是对的，也许我不能很好地描述。假设我们更改浏览器宽度，使正常行为不断增长。firstContent和.thirdContent必须相等，因为flex:1自动；现在，当我们改变浏览器大小时，而不是当内部文本变长或变短时，我需要它们的增长或收缩。在我所附的第一个提琴中，你可以看到“这是一个bug”的文字。firstContent的宽度和增长不等于。thirdContent。请注意，在上一次修改窗口大小时，.firstContent再次增长超过.thirdContent。我能解释清楚吗？：）我改变了你们可以在Fiddle中看到的源代码，并通过添加display:flex来解决这个问题；到.dvRow并设置flex:1自动；对于Span。事实上，我又在底层使用了flex，它似乎能帮上忙。请阅读并告诉我你的想法。是的，这是我的想法（在你第一次评论之后），但我不确定。我认为这会奏效：）