0

Here is the code snippet of code:

.row-container {
  display: inline-flex;
  flex-direction: row;
  border: 1px solid black;
  margin-top: 10px;
  height: 60px;
}

.row {
  flex-basis: 30px;
  background-color: coral;
  flex-shrink: 0;
}
<div class="row-container">
  <div class="row">1</div>
  <div class="row">2</div>
  <div class="row">3</div>
</div>

After googling i found that if i use min-width: 30px instead of flex basis in the flex items then

row-container width is equal to the total width of the row ie around 90px

, but id i only use flex-basis in flex items then the row-container does not encapsulates it children and the children over flows. Please let me know the reason for this.

Matan Sanbira
  • 1,433
  • 7
  • 20
Anurag Singh
  • 727
  • 6
  • 10
  • 27
  • Does this answer your question? [Chrome does not expand flex parent according to children's content](https://stackoverflow.com/questions/45482350/chrome-does-not-expand-flex-parent-according-to-childrens-content) – Amit Chauhan Jan 29 '20 at 08:20
  • this is actually considered as a bug. – Temani Afif Jan 29 '20 at 09:22

0 Answers0