html – 如何防止flex div的内容增加flex的宽度？

概述我已经创建了一个带有flex的嵌套div,我希望在增长和缩小时遵循flex规则,但是当内部文本或内容变长时,div会变得太长.在这个小提琴我用“这是一个错误”标记它,你可以看到这个div中的文本比其他更长,父flex flex增长,因为我不想要.我设置flex：1 1 auto;我不知道需要改变的地方.任何建议表示赞赏. 小提琴：http://jsfiddle.net/QMaster/JZHag/ 我已经创建了一个带有flex的嵌套div,我希望在增长和缩小时遵循flex规则,但是当内部文本或内容变长时,div会变得太长.在这个小提琴我用“这是一个错误”标记它,你可以看到这个div中的文本比其他更长,父flex flex增长,因为我不想要.我设置flex：1 1 auto;我不知道需要改变的地方.任何建议表示赞赏.

小提琴：http://jsfiddle.net/QMaster/JZHag/

解决方法 正如我在 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;}

fiddle

同时从span flex中删除：1 1 auto;.我认为没有必要.

总结

以上是内存溢出为你收集整理的html – 如何防止flex div的内容增加flex的宽度？全部内容，希望文章能够帮你解决html – 如何防止flex div的内容增加flex的宽度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。