CODEWITHSUNDEEP
htmlcssflexbox
Richard Yan
Richard Yan

Reputation: 1296

Equal size for arbitrary levels of nested flex children

Basically, I want 1, 2 and 3 all be of the same width, and similarly if 4, 5, 6, etc. were added dynamically during runtime. Is it possible with pure CSS?

x = 4;

$("button").on("click", () => {
  $(".active").removeClass("active").append(`
    <div class="flex active">
      <div>
        ${x++}
      </div>
    </div>
  `);
});
.flex {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  border-left: solid 1px #000;
}

div {
  flex: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex">
  <div>
    1
  </div>
  <div class="flex">
    <div>
      2
    </div>
    <div class="flex active">
      <div>
        3
      </div>
    </div>
  </div>
</div>
<button>add</button>

Upvotes: 0

Views: 85

Answers (2)

Temani Afif
Temani Afif

Reputation: 272947

You can use display:contents to reduce the level on nesting:

x = 4;

$("button").on("click", () => {
  $(".active").removeClass("active").append(`
    <div class="flex active">
      <div>
        ${x++}
      </div>
    </div>
  `);
});
.flex {
  display: flex;
  flex-direction: row;
}

.flex .flex {
  display:contents;
}

div {
  flex: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex">
  <div>
    1
  </div>
  <div class="flex">
    <div>
      2
    </div>
    <div class="flex active">
      <div>
        3
      </div>
    </div>
  </div>
</div>
<button>add</button>

Upvotes: 1

demkovych
demkovych

Reputation: 8847

You can play with css grid columns:

#a {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#a {
  background-color: #f77;
}

#b {
  background-color: #7f7;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column: 2 span;
}

#c {
  background-color: #77f;
}
<div id="a">
  <div class="first">
    1
  </div>
  <div id="b">
    <div>
      2
    </div>
    <div id="c">
      <div>
        3
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions