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% 
}

我很困惑，为什么你提到“行”，但使用的是'柔性方向：column'。您在块上固定宽度... flexbox不会覆盖该宽度。 –

我谈论行，因为基本上第一个是一个元素行，第二个是两个元素行。然后，它们每行包含一个元素，就像普通的列布局一样。 – MQ87

就像我说的那样，你有固定的宽度......除了重新思考你所追求的内容（对我来说这并不清楚）以及可能的方式，你可以做的不多。 –

答

Sry基因，我没有50级的声誉，这就是为什么我需要awnser。

首先（也许）问题：

做你把meta标签视口的头部

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

二（也许）妥协：

也许你可以工作与min-width？

–

答

简单的数学：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; 
}

Flex布局溢出外部容器

相关推荐