为什么在移动版本中flex项溢出容器

我是CSS和HTML的新手，现在我正在试用FlexBox。这是我的布局代码。有人能向我解释为什么我的第二个div（.rightContainer）离开了它的父级吗？我已经试过删除高度了，但没有成功。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlexBox Test</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <div class="leftContainer">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="rightContainer">
            <div class="banner"></div>
        </div>
    </div>
</body>
</html>

https://jsfiddle.net/pvvqwrb4/3/embedded/result/

在移动布局（@media(max-width: 600px)）中，.rightContainer flex项溢出flex .container，因为：

您将.container限制为height: 800px。

因此，第一个调整是将height切换到min-height:

.container {
     border: 10px solid lightcoral;
     margin: 0 auto;
     width: 70%;
     min-height: 800px; /* adjusted */
     display: flex;
}

您已将flex: 1 1 0应用于.rightContainer。

这告诉flex项在容器中的可用空间内是灵活的。但是，height: 800px在容器上，flex: 0 1 auto在.leftContainer上，容器中没有剩余空间。

因此，不要尝试flex: 1 1 0，而是尝试flex: 1 1 auto，它根据内容来调整灵活项目的大小。
```
.rightContainer {
      background: peachpuff;
      margin: 10px 10px 10px 5px;
      flex: 1 1 auto; /* adjusted */
} 
```
演示
快速摘要：
- flex: 1 1 0根据柔性容器中的可用空间来调整项目的大小
- flex: 1 1 auto根据内容宽度或高度属性调整项目大小
有关更多详细信息，请参阅flexbox规范：7.1.1。flex的常见值。

相关内容

最新更新

热门标签：