Why min-width:0 doesn't work for my flex elements?

Question

I've read that min-width is auto in flexbox for flex-items. That means that width of flex-item depends on its content inside (flex-item can't be smaller than the biggest word inside, and of course flex-item can't be smaller than the inner element with fixed width).

That means that I can establish for my flex-item min-width: 0 and my element will proceed shrink as before, but it doesn't. Why? What did I get wrong?

My code:

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

.parent {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  border: 3px solid red;
}

.second_group_block, .first_group_block {
  display: flex;
  min-width: 0;
  border: 3px solid green;
}

.first_group_block {
  margin-bottom: 10px;
}

.block {
  min-width: 0;
  width: 200px;
  height: 200px;
  background: grey;
  margin-right: 10px;
}

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

.block:nth-child(6) {
  margin: 0;
}

P.S. After some playing with this example, I found that maybe the cause of this behaviour that I decribe before is its flex-direction and the properties that establish main axis and cross axis. You can look here for the second example

Why does it works like this?

user_8620333 · Answer

All your expectations are correct but you are missing a small thing. The direction of the .parent element is a column one so the min-width has no effect on the child element since there is no overflow restriction (nor a shrink effect) on the cross axis. To add such restriction simply use max-width:100%

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

.parent {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  border: 3px solid red;
}

.second_group_block, .first_group_block {
  display: flex;
  min-width: 0;
  max-width:100%; /* here */
  border: 3px solid green;
}

.first_group_block {
  margin-bottom: 10px;
}

.block {
  min-width: 0;
  width: 200px;
  height: 200px;
  background: grey;
  margin-right: 10px;
}

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

.block:nth-child(6) {
  margin: 0;
}

Worth to note that keeping the stretch alignment will also produce the same result:

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

.parent {
  display: flex;
  min-width: 0;
  flex-direction: column;
  /*align-items: center; removed*/
  border: 3px solid red;
}

.second_group_block, .first_group_block {
  display: flex;
  min-width: 0;
  border: 3px solid green;
  justify-content:center;
}

.first_group_block {
  margin-bottom: 10px;
}

.block {
  min-width: 0;
  width: 200px;
  height: 200px;
  background: grey;
  margin-right: 10px;
}

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

.block:nth-child(6) {
  margin: 0;
}

Why min-width:0 doesn't work for my flex elements?

1 Answers