Question

我有fiddle显示我的代码。它按我的意愿工作：基本上它是一个容器，其中1行项目占100％widht，两个项目具有固定宽度。如果容器足够大，它们应该保持在一条直线上，否则它们应该包裹起来。

我不明白为什么当我的视口变小时，两个较小的块开始在容器外侧溢出，它们不会像我预期的那样收缩。我尝试删除固定宽度并使用flex-basis，但它打破了布局。

这是小提琴上的代码：

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

Answer 1

Sry，我没有50个声誉，这就是我需要发声的原因。

首先（可能）问题：

您是否将视口的元标记放在头部

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

第二次（可能）妥协：

也许你可以使用min-width？

Answer 2

简单数学：100% + 100px = 太多

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

救援你可以使用

<强> fiddle demo using border-box

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

或

<强> fiddle demo using calc()

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

Flex布局溢出外部容器

2 个答案: