CODEWITHSUNDEEP
htmlcssflexbox
Alan P.
Alan P.

Reputation: 3123

Flexbox items not shrinking

I have 4 boxes that I would like to resize as the size of my window changes. Box 1 will shrink, however box 2, 3 and 4 do not. What am I doing wrong?

.contents {
  display: flex;
  justify-content: flex-end;
  min-width: 0px;
}

.contents div:first-child {
  flex-grow: 1;
  padding: 5px;
}

.contents div {
  border-left: 1px solid red;
  flex-shrink: 1;
  min-width: 0px;
  overflow: hidden;
  padding: 5px 100px;
}
<div class="contents">
  <div>1 Really long text goes in here, really long text goes in here.</div>
  <div>2 Lorem</div>
  <div>3 Ipsum</div>
  <div>4 Dolor</div>
</div>

http://codepen.io/anon/pen/OppdmQ?editors=1100#0

Thank you.

Upvotes: 3

Views: 7628

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 372224

You have 100px padding on the left and right of each item (padding: 5px 100px). That's 200px of inflexible width right off the bat. Try this method instead:

.contents div {
  border-left: 1px solid red;
  flex: 0 1 200px; /* can't grow, can shrink, start at 200px width */
  min-width: 0px;
  overflow: hidden;
  padding: 5px;
  text-align: center;
}

revised codepen

Upvotes: 4

Dhaval Chheda
Dhaval Chheda

Reputation: 924

You won't achieve the desired effect if you are going to use padding since it will take up that much of space no matter what your screen size is. So, in that case you need to change the padding using media break points or change the flex properties according to the size of the screen.

Upvotes: 1

Related Questions