CODEWITHSUNDEEP
htmlcssflexbox
hubvill
hubvill

Reputation: 255

Nested flex items equal width

Is there a way for Block1, Block2 and Block3 to have the same widths with the HTML structure I have bellow? I have been trying to use flex: 1 which results in having 2 50% columns.

Fiddle

.container {
  display: flex;
  align-items: flex-start;
}

.blocks {
  display: flex;
  flex: 1;
}

.blocks-left {
  align-items: center;
  border: 2px solid purple;
}

.blocks-right {

}

.block {
  flex: 1;
}

#block-1 {
  background: red;
  height: 100px;
}

#block-2 {
  background: blue;
  height: 200px;
}

#block-3 {
  background: green;
  height: 400px;
}
<div class="container">
  <div class="blocks blocks-left">
    <div id="block-1" class="block">Block1</div>
    <div id="block-2" class="block">Block2</div>
  </div>
  <div class="blocks blocks-right">
   <div id="block-3" class="block">Block3</div>
  </div>
</div>

Upvotes: 0

Views: 780

Answers (1)

Temani Afif
Temani Afif

Reputation: 274385

make the block-right to have 33% of the width and 66% to the left one. For this you can simply use flex:2 and flex:1 so that the left block will take twice the same width as the right block

.container {
  display: flex;
  align-items: flex-start;
}

.blocks {
  display: flex;
  flex: 1;
}

.blocks-left {
  align-items: center;
  border: 2px solid purple;
  flex:2;
}

.blocks-right {
  flex:1;
}

.block {
  flex: 1;
}

#block-1 {
  background: red;
  height: 100px;
}

#block-2 {
  background: blue;
  height: 200px;
}

#block-3 {
  background: green;
  height: 400px;
}
<div class="container">
  <div class="blocks blocks-left">
    <div id="block-1" class="block">Block1</div>
    <div id="block-2" class="block">Block2</div>
  </div>
  <div class="blocks blocks-right">
   <div id="block-3" class="block">Block3</div>
  </div>
</div>

Upvotes: 2

Related Questions