Дочерние элементы вне контейнера

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

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

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

Оранжевый = контейнер ~ остальное — дочерние элементы…………………………………………………………………………………………………………………………………………………………………………………

1. Потому что вы установили фиксированную высоту для .card и процентную высоту для .test2 . Предоставьте изображение ожидаемого результата, чтобы кто-нибудь мог помочь вам с тем, чего вы пытаетесь достичь

Ответ №1:

Flexbox дочерние элементы могут быть только непосредственными дочерними элементами родительского элемента flex. .card является непосредственным дочерним элементом .container , родительского элемента flex. На этом скриншоте вы должны заметить, как дочерние элементы .card складываются и разливаются за пределами `.container, но они не являются дочерними элементами 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

1. но у красного дочернего элемента есть текст, когда я помещаю текст в центр, он исчезает

2. @muco2 Правильно, потому что у вас фиксированная высота на div . Вам нужно было бы добавить overflow: auto в test2 или переосмыслить свой макет. Вот демонстрационная версия этого.

3. test2 имеет высоту: 50%; значит, должно занимать 50% от родительского не всего экрана?

4. @muco2 Как вы хотите, чтобы это вело себя? Какова цель?

5. Я немного отвлекся, я постараюсь это понять и благодарю вас

Ответ №2:

.card имеет фиксированную высоту 200 пикселей.
.test1 имеет фиксированную высоту 150 пикселей.
.test2 имеет высоту 50%, которая будет равна 100 пикселям, потому что высота была установлена для его родительского элемента ( .card ).

.test2 переполняется .card потому что: 150px 100px > 200px . .container будет отображаться только высота .card .