爲什麼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>