<main>
  <h1>test flex nested</h1>
  <section class="childHasNoWidth">
    <h2>child has no width</h2>
    <div class="parent">
      <div class="child">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
  </section>
  <section class="childHasNoWidth otherGap">
    <h2>child has no width</h2>
    <div class="parent">
      <div class="child">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
  </section>
  <section class="childHasWidth">
    <h2>child has width</h2>
    <div class="parent">
      <div class="child">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
  </section>
</main>
main {
  width: 100%;
  maxWidth: 1028px;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 32px;
}
.parent {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: gray;
}
.child {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.otherGap .child {
  gap: 16px;
}
.childHasWidth .child {
  width: 100%;
}

.item {
  flex-basis: 100px;
  height: 100px;
  background-color: blue;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.