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

正如我在

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;.我认为没有必要.