Flex佈局溢出外部容器

我有這個fiddle顯示我的代碼。它工作正如我想要的：基本上它是一個帶有1行項目的容器，需要100％的寬度，以及兩個固定寬度的項目。如果容器足夠大，他們應該保持排隊，否則他們應該包裝。Flex佈局溢出外部容器

我不明白爲什麼當我的視口變小時，兩個較小的塊開始在容器外側溢出，並且它們沒有像我期望的那樣收縮。我試圖刪除固定的寬度和使用彈性基礎，但它打破了佈局。

這是對小提琴代碼：

<div class="container"> 
    <div class="search-form flex-row"> 
     <span class="block big">hi</span> 
     <div class="flex-block"> 
      <span class="block">hi</span> 
      <span class="block">hi</span> 
     </div> 

     <span class="block">hi</span> 
    </div> 
</div>

CSS：

.container{ 
    height:100vh; 
    width:100%; 
    padding:50px; 
} 
.search-form { 
    /* margin-bottom: 0px; */ 
    margin: auto; 
    height: 100%; 
    font-size: 18px; 
    background-color:blue; 

} 
.flex-row { 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    flex-direction: column; 
    align-items: center; 
} 
.flex-block{ 
display:flex; 
    flex-wrap:wrap; 
    justify-content: center; 
} 
.block{ 
    flex-shrink:1; 
    width:150px; 
    background-color:red; 
    margin:5px; 
} 
.block.big{ 
    width:100% 
}

來源

2015-10-19 MQ87

我很困惑，爲什麼你提到「行」，但使用的是'柔性方向：column'。您在塊上固定寬度... flexbox不會覆蓋該寬度。 –

我談論行，因爲基本上第一個是一個元素行，第二個是兩個元素行。然後，它們每行包含一個元素，就像普通的列布局一樣。 – MQ87

就像我說的那樣，你有固定的寬度......除了重新思考你所追求的內容（對我來說這並不清楚）以及可能的方式，你可以做的不多。 –

Sry基因，我沒有50級的聲譽，這就是爲什麼我需要awnser。

首先（也許）問題：

做你把meta標籤視口的頭部

<meta name="viewport" content="width=device-width, initial-scale=1.0">

二（也許）妥協：

也許你可以工作與min-width？

來源

2015-10-19 15:33:05

–

簡單的數學：100% + 100px = 太多

.container{ 
    height:100vh; 
    width:100%; 
    padding:50px; /* Issue */ 
}

救援你可以使用

*{margin:0; box-sizing: border-box;}

或

fiddle demo using calc()

.container{ 
    height:100vh; 
    width: calc(100% - 100px); /* cause 50padd + 50padd = 100 */ 
    padding:50px; 
}

來源

2015-10-19 15:54:03

Flex佈局溢出外部容器

回答

相關問題