Why the display: flex; is it necessary for a <section> to recognize a <div> as content?

user_19798512 0
Viewed 42

I'm having trouble understanding the relationship between the display: flex; and the <div> inside the <section>.

Initially, I was having trouble inserting a color into the <section>. Inside it were <div> modified to be equal-sized colored squares. However, as the <section> didn't recognize the <div> as content, it didn't expand, consequently preventing me from setting a background-color for it.

<!doctype html>

<html>

<body style="background-color: #E8E8F2;">
  <section style="background-color: blueviolet; border: pink solid 1px;">
    <div style="background-color: red; margin: auto; width: 800px;">
      <div style="background: green; float: left; height: 400px; width: 400px;"></div>
      <div style="background: brown; float: left; height: 400px; width: 400px;"></div>
      <div style="background: black; float: left; height: 400px; width: 400px;"></div>
    </div>
  </section>
</body>

</html>

Here on the site I found that this was completely workable by setting a height for the <section>, but soon after doing that, I realized that another <section> I created had no height, but recognized other <div> as content.

.feed {
  background-color: #F1F8F5;
  float: left;
  height: 875px;
  justify-content: space-around;
  margin-top: 20px;
  width: 875px;
}

.news {
  background-color: #F3ECF9;
  float: left;
  height: 400px;
  margin: 25px 0px 0px 25px;
  text-align: justify;
  width: 400px;
}

.section-position {
  background-color: red;
  border: pink solid 2px;
  display: flex;
  justify-content: center;
}

* {
  font-family: Sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

div h1 {
  padding: 15px;
}

p {
  margin: 0px;
  padding: 15px;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="config.css">
  <meta charset="utf-8">
  <title>Dungeon</title>
</head>

<body>
  <section class="section-position">
    <div class="feed">
      <div class="news">
        <h1> Example Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis tincidunt erat sit amet consequat. Fusce maximus nunc rutrum nisl faucibus fringilla. Pellentesque id turpis in nibh tincidunt placerat ut non dolor. Vestibulum auctor sem
          vestibulum justo blandit, at scelerisque ligula iaculis. Nam sed luctus purus. Sed ut ligula rutrum, vehicula enim et, ultrices purus. Suspendisse massa diam, lobortis scelerisque leo non, rutrum tincidunt metus. Nam id vestibulum augue. Sed
          bibendum, magna vel vestibulum tincidunt, ipsum nulla auctor nulla, eget eleifend ligula mauris vitae ligula. Phasellus quis ante eu libero convallis faucibus. Nunc convallis neque orci, quis tristique nisi hendrerit eu. Maecenas bibendum et
          est a fermentum. Nunc rutrum libero nec arcu bibendum faucibus.</p>
      </div>
      <div class="news">
        <h1> Example Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis tincidunt erat sit amet consequat. Fusce maximus nunc rutrum nisl faucibus fringilla. Pellentesque id turpis in nibh tincidunt placerat ut non dolor. Vestibulum auctor sem
          vestibulum justo blandit, at scelerisque ligula iaculis. Nam sed luctus purus. Sed ut ligula rutrum, vehicula enim et, ultrices purus. Suspendisse massa diam, lobortis scelerisque leo non, rutrum tincidunt metus. Nam id vestibulum augue. Sed
          bibendum, magna vel vestibulum tincidunt, ipsum nulla auctor nulla, eget eleifend ligula mauris vitae ligula. Phasellus quis ante eu libero convallis faucibus. Nunc convallis neque orci, quis tristique nisi hendrerit eu. Maecenas bibendum et
          est a fermentum. Nunc rutrum libero nec arcu bibendum faucibus.</p>
      </div>
      <div class="news">
        <h1> Example Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis tincidunt erat sit amet consequat. Fusce maximus nunc rutrum nisl faucibus fringilla. Pellentesque id turpis in nibh tincidunt placerat ut non dolor. Vestibulum auctor sem
          vestibulum justo blandit, at scelerisque ligula iaculis. Nam sed luctus purus. Sed ut ligula rutrum, vehicula enim et, ultrices purus. Suspendisse massa diam, lobortis scelerisque leo non, rutrum tincidunt metus. Nam id vestibulum augue. Sed
          bibendum, magna vel vestibulum tincidunt, ipsum nulla auctor nulla, eget eleifend ligula mauris vitae ligula. Phasellus quis ante eu libero convallis faucibus. Nunc convallis neque orci, quis tristique nisi hendrerit eu. Maecenas bibendum et
          est a fermentum. Nunc rutrum libero nec arcu bibendum faucibus.</p>
      </div>
    </div>
  </section>
</body>

</html>

The only difference between the <section> is that one has display: flex; and another not, hence my doubt. Why the fact that the <section> has the property display: flex; does it recognize <div> as content?

Obs: Notice how the presence of display: flex; in the first code makes the <section> recognize the <div>. I assume it was display: flex; that did it, feel free to point out any flaws in my line of reasoning.

<!doctype html>

<html>

<body style="background-color: #E8E8F2;">
  <section style="background-color: blueviolet; border: pink solid 1px; display: flex;">
    <div style="background-color: red; margin: auto; width: 800px;">
      <div style="background: green; float: left; height: 400px; width: 400px;"></div>
      <div style="background: brown; float: left; height: 400px; width: 400px;"></div>
      <div style="background: black; float: left; height: 400px; width: 400px;"></div>
    </div>
  </section>
</body>

</html>

Thanks in advance to anyone who can answer my question.

flexbox css html
1 Answers

All flex items (such as your red div) establish an independent formatting context, which in this case is a block formatting context.

Block formatting contexts contain their floated item descendants.

Without making the section display:flex, the red div is not a flex item, doesn't establish a block formatting context, and therefore doesn't contain the floats.

Alohci_425850
Related