为什么flex layout受其溢出内容的影响？

Question

正如你所看到的，一个弹性盒子不会分成两部分，只是显示蓝色部分。如果您取消对overflow: hidden的注释，它将按预期工作。 为什么？

.nav内容超出了宽度。

.cont { 
 
    width: 200px; 
 
    height: 300px; 
 
    background-color: red; 
 
    display: flex; 
 
} 
 
.aside { 
 
    width: 50px; 
 
    height: 100%; 
 
    background-color: green; 
 
} 
 
.nav { 
 
    /*overflow: hidden;*/ 
 
    flex: 1; 
 
    background-color: blue; 
 
} 
 
.info { 
 
    max-width: 70%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    word-wrap: normal; 
 
} 
 
.name {}

<div class="cont"> 
 
    <div class="aside"></div> 
 
    <div class="nav"> 
 
    <div class="info"> 
 
     <span class="name"> tes te s dnaosdjw d adondnasjdoqnsnda djj</span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

由于柔性容器的初始设定是flex-shrink: 1。这意味着Flex项目可以缩小，并且可以防止容器溢出。

.aside您的.aside元素没有内容，因此该算法将宽度缩小为0，为兄弟姐妹提供更多空间并确保没有任何内容溢出容器。

您可以用flex-shrink: 0覆盖此设置（意思是禁用缩小）。

.cont { 
 
    width: 200px; 
 
    height: 300px; 
 
    background-color: red; 
 
    display: flex; 
 
} 
 

 
.aside { 
 
    width: 50px; 
 
    height: 100%; 
 
    background-color: green; 
 
    flex-shrink: 0;   /* new */ 
 
} 
 

 
.nav { 
 
    overflow: hidden; 
 
    flex: 1; 
 
    background-color: aqua; /* adjusted color for readability */ 
 
} 
 

 
.info { 
 
    max-width: 70%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    word-wrap: normal; 
 
}

<div class="cont"> 
 
    <div class="aside"></div> 
 
    <div class="nav"> 
 
     <div class="info"> 
 
      <span class="name"> tes te s dnaosdjw d adondnasjdoqnsnda djj</span> 
 
     </div> 
 
    </div> 
 
</div>