Question

为什么柔性显示器中的孩子不在容器外？我试图解决该问题，但无法正常工作

/* ------------------------------------------- */
* {
    font-family: 'Comfortaa', cursive;
    margin: 0;
    padding: 0;
}

body {
    background-color: #f6f6f9;
}

/* ------------------------------------------- */
.container {
    background-color: orange;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: auto;
    margin: 50px 0px 50px 0px;
}

.card {
    width: 150px;
    height: 200px;
    background-color: #ffffff;
}

.test1 {
    width: 150px;
    height: 150px;
}

.test2 {
    width: auto;
    height: 50%;
    background-color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="CSS/home_css.css">
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>
<body>

<div class="container">
    <div class="card">
        <div class="test1" style="background-color: #ef5777;"></div>
        <p class="test2"></p>
    </div>
</div>

</body>
</html>

橙色=容器〜否则是孩子................................................... ................................................... ................................................... ................................................... ............

Answer 1

.card的固定高度为200px。
.test1的固定高度为150px。
.test2的高度为50％，即100px，因为高度是在其父级（.card）上设置的。

.test2正在溢出.card，原因是：150px + 100px > 200px。 .container只会看到.card的高度。

Answer 2

Flexbox子代只能是flex父代的直系子代。 .card是弹性父级.container的直接子代。在此屏幕截图中，您应该注意到.card的子代是如何在`.container外部堆积和溢出的，但是它们是 not flex子代。这是预期的行为。

要将.card的子代保留在.container内，请同时使.card成为flex父代，并具有柱状方向。

* {
  font-family: 'Comfortaa', cursive;
  margin: 0;
  padding: 0;
}

body {
  background-color: #f6f6f9;
}

/* ------------------------------------------- */

.container {
  background-color: orange;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: auto;
  margin: 50px 0px 50px 0px;
}

.card {
  width: 150px;
  height: 200px;
  background-color: #ffffff;
  display: flex;             /* <- Added */
  flex-direction: column;    /* <- Added */
}

.test1 {
  width: 150px;
  height: 150px;
}

.test2 {
  width: auto;
  height: 50%;
  background-color: red;
}

<div class="container">
  <div class="card">
    <div class="test1" style="background-color: #ef5777;"></div>
    <p class="test2"></p>
  </div>
</div>

jsFiddle

集装箱外的孩子

2 个答案: