nested flex item is not being shrink. min-width:0 solving the problem

7 Views Asked by At

when flex container have flex items.items shrinks even if width is declared.but if i make this flex items a flex container then flex-items with fix width of this inner container do not shrink.the problem is being solved if i add min-width:0 to inner container. i will be very kind if someone help me to understand the behavior.thanks.

.flex-container {
  border: 2px solid red;
  height: 200px;
  padding: 10px;
  display: flex;
}

.flex-item1 {
  border: 2px solid black;
  padding: 10px;
  display: flex;
}

.flex-item2 {
  border: 2px solid black;
  padding: 10px;
  display: flex;
}

.nested-flex-item1 {
  border: 2px solid blue;
  width: 200px;
}
<div class="flex-container">
  <div class="flex-item1">
    <div class="nested-flex-item1">

    </div>
    <div class="nested-flex-item2">

    </div>
  </div>

  <div class="flex-item2">
    <div class="nested-flex-item1">

    </div>
  </div>
</div>

0

There are 0 best solutions below