0

why the divs shrink while using display :flex .I want to scroll my divs horizontally .but it not taking width height 100 and 100?

.wrapper {
  display: flex;
  width: 300px;
  overflow-x: auto;
}

.box {
  height: 100px;
  width: 100px;
  margin-right: 10px;
  background-color: blue
}
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>


</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
user5711656
  • 3,310
  • 4
  • 33
  • 70
  • flex: 0 1 auto; 1 = shrink = enabled – VXp May 17 '18 at 11:09
  • or you set flex-shrink to 0, or you set a min-width to 100px ... children shrinking is the defaut behavior – G-Cyrillus May 17 '18 at 11:12
  • It depends on what you want with your css. Flex has a default of disabling element from wrapping. If you want you boxes to keep your format I suggest enabling flex-wrap. Also you can disable flex-shrink. Check the flex documentation for more info. – Dennis Spierenburg May 17 '18 at 11:13

0 Answers0