4

I have a flex container with 3 children. On each child max-width and min-width is set, so that when the screen size changes, I can have them look decent without too much effort.

.container{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-right: -10px;
}

.child{
  flex-grow: 1;
  max-width: 450px;
  min-width: 350px;
  margin-top: 10px;
  margin-right: 10px;
  background: blue;
  height: 400px;
}
<div class="container">
  <div class="child">
    test content
  </div>
  <div class="child">
    test content
  </div>
  <div class="child">
    test content
  </div>
</div>

The problem is that when the screen becomes so small that 1 of the children is forced to a new row, it doesn't have the same size as the other 2 children above it: enter image description here

Is there anyway to force the child on the new row to have the same width as its siblings?

Fiddle: https://jsfiddle.net/1ekdkbvk/

Community
  • 1
  • 1
F21
  • 32,163
  • 26
  • 99
  • 170
  • `max-width: 350px;` and `min-width: 350px;` ? – Lekz Flores Feb 12 '16 at 03:58
  • It's not really clear what you're asking. In your image above with the red arrow, the boxes in the first row are near their minimum allowed width (`min-width: 350px`), and the box on the second row is near its maximum allowed width (`max-width: 450px`). The layout is doing exactly what you ask. What exactly do you want boxes to do on wrap? Be a fixed width? – Michael Benjamin Feb 12 '16 at 04:02
  • @Michael_B: I want to have a way to have that third box's width mirror the width of the first and second boxes. I do not want the boxes to have a fixed width because by setting a `min-width` and `max-width`, The boxes are always guaranteed to be within those dimensions (which are the ranges that make the contents within readable). – F21 Feb 12 '16 at 04:13

2 Answers2

2

Maybe an invisible flex item in the last slot will work for you.

Add this code to your CSS:

.container::after {
    content: "";
    flex-grow: 1;
    max-width: 450px;
    min-width: 350px;
}

DEMO

UPDATE

I forgot to add one rule, which caused a slight overflow to the right of the pseudo-element.

.container::after {
    content: "";
    flex-grow: 1;
    max-width: 450px;
    min-width: 350px;
    margin-right: 10px;        /* to match the other flex items */
}

REVISED DEMO

More details in this related post: Properly sizing and aligning the flex item(s) on the last row

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Thanks! I had a feeling I had to fake an extra element to achieve this. I used a media query to add it so that when the screen has a lot of width, you don't get that empty slot on the right. – F21 Feb 12 '16 at 05:03
  • Quick update: The element on the lower left (see your fiddle) will always be slightly larger than expected. Is there anyway to fix that? – F21 Feb 12 '16 at 05:07
  • Here's a more accurate fiddle demonstrating the problem: https://jsfiddle.net/w03ckz7c/1/ – F21 Feb 12 '16 at 05:37
  • @F21, yes I see that `flex-basis: 0` solves the problem in your revised code. In my answer (which uses the code posted in your question), the solution is to add `margin-right: 10px` to the pseudo-element. Something I forgot to do in my first run. Sorry about that. Answer revised. – Michael Benjamin Feb 13 '16 at 14:09
-1

Just remove flex-grow: 1; from .child will solve your issue.

.child{
  max-width: 450px;
  min-width: 350px;
  margin-top: 10px;
  margin-right: 10px;
  background: blue;
  height: 400px;
}

Working Fiddle

Or other solution:

Use flex-basis: 100%; to .child.

Fiddle

ketan
  • 19,129
  • 42
  • 60
  • 98
  • 1
    If I remove `flex-grow: 1`, the children no longer expand to their max width of `450px` even when there's space. If I add `flex-basis: 100%`, the children won't attempt to shrink down to fit before being wrapped to a new row. – F21 Feb 12 '16 at 04:17