CODEWITHSUNDEEP
cssflexbox
masonCherry
masonCherry

Reputation: 974

with `flex-basis = 0` how does a flex sub-container decide what with it has

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: hotpink;
}

.flex-box {
    display: flex;
    background-color: gray;
}

.flex-box .box-1 {
    flex: 1 1 0;
    background-color: yellowgreen;
}

.flex-box .box-2 {
    flex: 1 1 0;
    width: 100px;
    background-color: crimson;
}
<main>
    <div class="flex-box">
        <div class="box-1">
            <p>Lorem, ipsum dolor si?</p>
        </div>
        <div class="box-2">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas.</p>
        </div>
    </div>
</main>

I have a main that has flex with flex-direction: column and with align-items: center and it has a div inside it with flex as well. I have a div div.box-2, inside the inner flex box with a width of 100px. flex-basis is 0 on both the children of the inner flex box's children.

Now the inner flex box gets a computed width of 256.217px. my question is where does this number come from. box-1 gets a computer width value of 128.1px and box-2 gets 128.12px.

with a flex-basis of 0 and flex-grow of 1. the boxes can grow from their original height but where does get this 128px value come from

enter image description here

if I remove the width: 100px from box-2 then now box-1 has a width of 301.867px and box-2 has 301.883px to make a combined parent container width of 603.75px. But again where are these values coming from.

enter image description here

Upvotes: 1

Views: 110

Answers (1)

Temani Afif
Temani Afif

Reputation: 273626

Here is a step by step illustration to understand the logic:

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: hotpink;
  margin:5px;
}

.flex-box {
  display: flex;
  background-color: gray;
}
.flex-box .box-1 {
  /*flex: 1 1 0;*/
  background-color: yellowgreen;
}

.flex-box .box-2 {
  /*flex: 1 1 0
  width: 100px; */
  background-color: crimson;
}
We apply nothing and each element will take the width of its content without line break
<main>
  <div class="flex-box">
    <div class="box-1">
      <p>Lorem, ipsum dolor si?</p>
    </div>
    <div class="box-2">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas.</p>
    </div>
  </div>
</main>
We make the second item width:100px. it will shrink to that width and everything will remain centred
<main>
  <div class="flex-box">
    <div class="box-1">
      <p>Lorem, ipsum dolor si?</p>
    </div>
    <div class="box-2" style="width:100px">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas.</p>
    </div>
  </div>
</main>
Now the width of flex-box we have above will be the reference for the flex calculation and when we apply flex: 1 1 0 to both, then each one will get half that width 

<main>
  <div class="flex-box">
    <div class="box-1" style="flex:1 1 0">
      <p>Lorem, ipsum dolor si?</p>
    </div>
    <div class="box-2" style="width:100px;flex:1 1 0">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas.</p>
    </div>
  </div>
</main>

As you can see, the default of the first item + 100px of the second is the total width used and divided between both items.

Same logic happen in your second case but without the 100px:

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: hotpink;
  margin:5px;
}

.flex-box {
  display: flex;
  background-color: gray;
}
.flex-box .box-1 {
  /*flex: 1 1 0;*/
  background-color: yellowgreen;
}

.flex-box .box-2 {
  /*flex: 1 1 0
  width: 100px; */
  background-color: crimson;
}
We apply nothing and each element will take the width of its content without line break
<main>
  <div class="flex-box">
    <div class="box-1">
      <p>Lorem, ipsum dolor si?</p>
    </div>
    <div class="box-2">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas.</p>
    </div>
  </div>
</main>
Now the width of flex-box we have above will be the reference for the flex calculation and when we apply flex: 1 1 0 to both, then each one will get half that width 

<main>
  <div class="flex-box">
    <div class="box-1" style="flex:1 1 0">
      <p>Lorem, ipsum dolor si?</p>
    </div>
    <div class="box-2" style="flex:1 1 0">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas.</p>
    </div>
  </div>
</main>

Upvotes: 1

Related Questions