0

Why do my child elements ignore the parent class flex styling?

.container {
  width: 100%;
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
}

.parent {
  display: flex;
  width: 100%;
  background-color: white;
}

.child {
  width: 50%;
  border-style: double;
}
<div class="parent">
  <div class="container">
    <div class="child">
      <p>Hello</p>
    </div>

    <div class="child">
      <p>Hello</p>
    </div>

  </div>

</div>

If the container element does not wrap the two child elements then the child elements align aside each other as expected

yinsweet
  • 2,823
  • 1
  • 9
  • 21
Mark Wilson
  • 15
  • 5
  • The flex property will be applied only to its direct child in your case it will be applied to container element only.If you want your child elements to have flex style declare display:flex to container div. – Gnanavel pandian Jun 18 '20 at 08:08

1 Answers1

1

display: flex;, is going to direct children, and your child class is direct children of container and not parent.

So try to display: flex; to your container class

shai_sharakanski
  • 337
  • 1
  • 9