Why does flex-basis doesn't work with flex-direction: row?

Question

I faced that issue when I tried to replace width by flex-basis. For example:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent_1, .parent_2 {
  display: flex;
  border: 5px solid red;
}

.group_block_1, .group_block_2 {
  display: flex;
  border: 5px solid green;
  margin-bottom: 10px;
}

.group_block_1 {
  width: 100%;
}

.group_block_2 {
  max-width: 100%;
  
}

.block_1, .block_2 {
  flex-basis: 500px;
  height: 200px;
  background: grey;
  margin-right: 10px;
}

.block_1:nth-child(3) {
  margin: 0;
}

.block_2:nth-child(3) {
  margin: 0;
}


/*for the first example*/
.parent_1 {
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

/*for the second example*/
.parent_2 {
  flex-direction: row;
}

.el {
  width: 30px;
  height: 30px;
  background: purple;
}

<div class="parent_1">
  <div class="group_block_1">
    <div class="block_1">
      <div class="el"></div>
    </div>
    <div class="block_1"></div>
    <div class="block_1"></div>
  </div>
</div>


<div class="parent_2">
  <div class="group_block_2">
    <div class="block_2"></div>
    <div class="block_2"></div>
    <div class="block_2"></div>
  </div>
</div>

Flex-basis works only in the first example when I established flex-direction: column. Why it doesn't work with flex-direction: row?

.parent is not flex container for .block, it's .group_block. So, why does the flex-direction of .parent impact on .block? I mean flex-direction is not inherited property.

P.S. And I know that flex-basis works like width for flex-direction: row and like height for flex-direction: column. But... .group_container is flex-container for .block and I didn't change the flex-direction for .group_container. It's always flex-direction: row.

Updated

The reason for this behaviour is max-width: 100%(that property was established in the second example). So, it's not about flex-direction at all. You can look here, everything works. But I don't understand why flex-basis doesn't work with max-width: 100% or without any width for .group_block at all.

ANSWER

This question is closed and I don't want to ask a new one, so I write here... The reason for this behaviour is that flex container (which is also flex item) doesn't consider the width (the width is established by flex-basis property) of its inner flex-item. That's why we should establish the width of our flex container (width: 100%), because by defaut it's auto (depends on inner content). This helps to expand the flex container to contain the flex-item inside. I think this is happening only in those cases when flex container is also flex item, because here everything works fine.

And it may also be interesting... The flex container ignores the width of its inner flex-item. That's why we can increase the width of flex-item by its content. For example.

you also need to reset flex-shrink to , else it shrinks to fit the width of the parent instead overflowing. flex-wrap:wrap can also needed if you do not want to use overflow. — G-Cyrillus, Dec 10 '20 at 18:19
in the duplicate read the section *flex-basis ignored in a nested flex container. width works.* — Temani Afif, Dec 10 '20 at 21:11

Why does flex-basis doesn't work with flex-direction: row?

0 Answers0