Text is resizing flexbox children instead of wrapping (with flex-grow)

Question

I'm using flex-grow and media queries in attempts to make a simple and responsive site. However, instead of wrapping, text seems to be resizing the containing divs that its in and offsetting everything else. Does anyone know why this is happening?

I think that this behavior has to do with the fact that I'm using flex-grow. I've tried setting min/max widths and have also tried various different word wrapping properties, but haven't had luck.

Here's my code:

jsFiddle

<div id="container">
  <div id="title">
    <h1>Title</h1>
  </div>
  <div class="work" id="motion">
    <h2>Sub</h2>
  </div>
  <div class="work" id="print">
    <h2>Sub</h2>
  </div>
  <div class="work" id="interaction">
    <h2>Sub</h2>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: sans-serif;
  font-weight: normal;
  max-width: 100%;
}

#container h1,
h2 {
  padding: 1rem;
}

#container {
  height: 100%;
  display: flex;
  flex-direction: row;
}

#title {
  background-color: red;
  flex-grow: 2;
  margin: 1em;
  min-height: 15em;
}

.work {
  margin: 1em;
  flex-grow: 1;
  background-color: gray;
  min-width: 4em;
}

#motion,
#print,
#title {
  margin-right: 0;
  margin-bottom: 1em;
}

#interaction {}

@media only screen and (max-width: 1020px) {
  body {
    background-color: blue;
  }
  #container {
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
  }
  #motion,
  #print {
    margin-right: 1em;
    margin-bottom: 0;
  }
  .work {
    min-height: 10em;
  }
  #title {
    height: 100%;
  }
}

@media only screen and (max-width: 600px) {
  body {
    background-color: yellow;
  }
  #motion,
  #print,
  #title {
    margin-right: 1em;
    margin-bottom: 0;
  }
  #container {
    flex-wrap: nowrap;
  }
}

zgood · Accepted Answer · 2019-02-07T18:27:06.893

You don't have any widths set on your flexbox children, so when you have more text content those divs will grow.

jsFiddle

You could add something like this:

    #container > div {
      width: calc(25% - 2em); /* Minus 2 em for the 1em margin on left and right */
    }

@media only screen and (max-width: 1020px) {
     #container>div {
        width: calc(33% - 2em);
      }
}

@media only screen and (max-width: 600px) {
     #container>div {
        width: calc(100% - 2em);
      }
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: sans-serif;
  font-weight: normal;
  max-width: 100%;
}

#container h1,
h2 {
  padding: 1rem;
}

#container {
  height: 100%;
  display: flex;
  flex-direction: row;
}

#container>div {
  width: calc(25% - 2em);
}

#title {
  background-color: red;
  flex-grow: 2;
  margin: 1em;
  min-height: 15em;
}

.work {
  margin: 1em;
  flex-grow: 1;
  background-color: gray;
  min-width: 4em;
}

#motion,
#print,
#title {
  margin-right: 0;
  margin-bottom: 1em;
}

#interaction {}

@media only screen and (max-width: 1020px) {
  body {
    background-color: blue;
  }
  #container {
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
  }
  #container>div {
    width: calc(33% - 2em);
  }
  #motion,
  #print {
    margin-right: 1em;
    margin-bottom: 0;
  }
  .work {
    min-height: 10em;
  }
  #title {
    height: 100%;
  }
}

@media only screen and (max-width: 600px) {
  body {
    background-color: yellow;
  }
  #motion,
  #print,
  #title {
    margin-right: 1em;
    margin-bottom: 0;
  }
  #container {
    flex-wrap: nowrap;
  }
  #container>div {
    width: calc(100% - 2em);
  }
}

<div id="container">
  <div id="title">
    <h1>Title</h1>
  </div>
  <div class="work" id="motion">
    <h2>Sub Sub Sub Sub Sub Sub Sub Sub Sub Sub </h2>
  </div>
  <div class="work" id="print">
    <h2>Sub</h2>
  </div>
  <div class="work" id="interaction">
    <h2>Sub</h2>
  </div>
</div>

Of course, obvious mistake on my part. How does this work with flex-grow? Can I still use it to separate the whole of the body into fractions? — Josh Krauth-Harding, Feb 07 '19 at 18:19
flex-grow will indicate how much _remaining_ space to distribute amoungst the children. From [this guide on flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) _"If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least)."_. In your case you shouldn't have any remaining space, because we have set a percentage based width on your flex children that will equal 100%. — zgood, Feb 07 '19 at 18:24
awesome, thanks — to clarify: should I remove `flex-grow` entirely and set each child div to a % so that they equal 100%? Also, how does having margins on each factor into the %s that I set? As long as I use `calc()` to include them should I be fine? — Josh Krauth-Harding, Feb 07 '19 at 18:32
margin should not be calculated into the % widths. Padding will, if you have `box-sizing: border-box;` set on your elements (normally part of CSS frameworks and reset stylesheets). If you don't like using the `calc` function and would rather have sizes like `width: 25%;`, you can do that - just add a inner div wrapper and set its padding to what the margin of the flex children are then remove the margin from the children. I will update my answer with an example. You can remove the flex grow at this point. flex-grow is important when you don't have explicit widths set and your content isnt 100% — zgood, Feb 07 '19 at 18:37

Text is resizing flexbox children instead of wrapping (with flex-grow)

jsFiddle

1 Answers1