Flexbox始終保持在100％的外部容器上

我在Flexbox中有5列div。問題是，隨着屏幕變小，Flexbox開始走出白色容器。如果我想讓所有列繼續變小，該怎麼辦？爲什麼Flexbox決定在某一點開始向外部容器外移動，而不是繼續變小？我如何改變它，讓它們變得更小？Flexbox始終保持在100％的外部容器上

JSFiddle

.container { 
 
    display: block; 
 
    background-color: #fff; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
} 
 

 
.row { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-flow: row nowrap; 
 
    flex-flow: row nowrap; 
 
    margin-left: -30px; 
 
    margin-right: -30px; 
 
    padding: 15px 0 60px; 
 
} 
 

 
.cat { 
 
    border: 1px solid black; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="cat"> 
 
     Hello 
 
    </div> 
 
    <div class="cat"> 
 
     This is a group of flex columns 
 
    </div> 
 
    <div class="cat"> 
 
     Isn't that interesting? 
 
    </div> 
 
    <div class="cat"> 
 
     This is a group of flex columns 
 
    </div> 
 
    <div class="cat"> 
 
     Isn't that interesting? 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-15 James Mitchell

原因是你的細胞內的文本，並填充你，你只能使用應用。單元格將佔用其中包含的最大單詞的空間。如果刪除填充，則會繼續收縮，但會停留在每個單元格中最大文本所需的最小間距處。 –

請回顧並評論我的答案，並讓我知道如果有什麼不清楚或缺失。如果不是的話，那麼如果你能接受它會很好。 – LGSon

一個Flex項目的默認min-width爲auto，這意味着它不會收縮低於其內容。

如果您只是將min-width: 0;添加到cat規則中，它們將縮小以適合其容器，而不是在其外部生長。

根據您可能要添加的文字overflow: hidden，文字不會溢出。

注，overflow: hidden具有爲min-width同樣的效果，所以，如果你喜歡

.container { 
 
    display: block; 
 
    background-color: #fff; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
} 
 

 
.row { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-flow: row nowrap; 
 
    flex-flow: row nowrap; 
 
    margin-left: -30px; 
 
    margin-right: -30px; 
 
    padding: 15px 0 60px; 
 
} 
 

 
.cat { 
 
    border: 1px solid black; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    min-width: 0; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="cat"> 
 
     Hello 
 
    </div> 
 
    <div class="cat"> 
 
     This is a group of flex columns 
 
    </div> 
 
    <div class="cat"> 
 
     Isn't that interesting? 
 
    </div> 
 
    <div class="cat"> 
 
     This is a group of flex columns 
 
    </div> 
 
    <div class="cat"> 
 
     Isn't that interesting? 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-15 17:30:22 LGSon

完全忘了'min-width：auto' ... cool！ – kukkuz

Flexbox始終保持在100％的外部容器上

回答

相關問題