2

I have 5 columns of divs in a flexbox. The issue is, as the screen gets smaller, the flexbox starts to go outside of the white container. What if I want all the columns to continue to get smaller? Why does the flexbox decide at a certain point to start moving outside the outer container, rather than continue to get smaller? How do I change that so they keep getting smaller?

JSFiddle

.container {
  display: block;
  background-color: #fff;
  padding-left: 30px;
  padding-right: 30px;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  margin-left: -30px;
  margin-right: -30px;
  padding: 15px 0 60px;
}

.cat {
  border: 1px solid black;
  padding-left: 30px;
  padding-right: 30px;
}
<div class="container">
  <div class="row">
    <div class="cat">
      Hello
    </div>
    <div class="cat">
      This is a group of flex columns
    </div>
    <div class="cat">
      Isn't that interesting?
    </div>
    <div class="cat">
      This is a group of flex columns
    </div>
    <div class="cat">
      Isn't that interesting?
    </div>
  </div>
</div>
showdev
  • 28,454
  • 37
  • 55
  • 73
James Mitchell
  • 2,387
  • 4
  • 29
  • 59
  • 1
    The reason is the text inside your cells and also the padding you applied. The cell will take the space of the largest word contained in it. If you remove the padding the shrinking continues but will stop at the minimum spacing required for the largest text in each cell. – Nasir T Aug 15 '17 at 17:14
  • Please review and comment on my answer, and let me know if something is unclear or missing. If not, then it would be great if you could accept it. – Asons Aug 20 '17 at 11:33

1 Answers1

2

A flex item's default min-width is auto, which means it won't shrink below its content.

If you simply add min-width: 0; to the cat rule, they will shrink to fit their container instead of growing outside it.

Based on the text you might want to add overflow: hidden so the text won't overflow.

Note, overflow: hidden has the same effect as min-width, so you can use only that if you like

.container {
  display: block;
  background-color: #fff;
  padding-left: 30px;
  padding-right: 30px;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  margin-left: -30px;
  margin-right: -30px;
  padding: 15px 0 60px;
}

.cat {
  border: 1px solid black;
  padding-left: 30px;
  padding-right: 30px;
  min-width: 0;
}
<div class="container">
  <div class="row">
    <div class="cat">
      Hello
    </div>
    <div class="cat">
      This is a group of flex columns
    </div>
    <div class="cat">
      Isn't that interesting?
    </div>
    <div class="cat">
      This is a group of flex columns
    </div>
    <div class="cat">
      Isn't that interesting?
    </div>
  </div>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165