Дети вне контейнера - PullRequest
Новая
       3

Дети вне контейнера

1 голос
/ 29 марта 2019

Почему дочерний элемент находится вне контейнера на гибком дисплее?Я пытался решить проблему, но она не работает 

/* ------------------------------------------- */
* {
    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>

Оранжевый = контейнер ~ остальное - дети .........................................................................................................................................................................................................

Ответы [ 2 ]

0 голосов
/ 29 марта 2019

Flexbox дети могут быть только непосредственными детьми гибкого родителя..card является непосредственным потомком .container, гибкого родителя.На этом снимке экрана вы должны заметить, как дочерние элементы .card укладываются и разливаются за пределы `.container, но они являются , а не гибкими дочерними элементами.Это ожидаемое поведение.enter image description here

Чтобы дети .card находились внутри .container, сделайте также .card гибким родителем со столбчатым направлением.

enter image description here

* {
  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

0 голосов
/ 29 марта 2019
  • .card имеет фиксированную высоту 200px.
  • .test1 имеет фиксированную высоту 150px.
  • .test2 имеет высоту 50%, которая составит 100 пикселей, поскольку высота была установлена ​​для его родителя (.card).

.test2 переполнен .card, потому что: 150px + 100px > 200px. .container увидит только высоту .card.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...