CODEWITHSUNDEEP
htmlcssflexbox
kacie guthrie
kacie guthrie

Reputation: 13

Flex-wrap property not responsive when parent has a set width

In the example below, when I set a width for a wrapper, the parent flex container can no longer use the flex-wrap property. The top two boxes won't wrap, but the bottom ones will. 

<div class="wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>


  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>

.wrapper {
  width: 700px;
  margin: 0 auto;
  border: solid cadetblue 5px;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  height: 250px;
  min-width: 250px;
  max-width: 300px;
  flex: 1;

  background: mistyrose;
  border: solid goldenrod 2px;
  margin: 30px;
}

Upvotes: 1

Views: 568

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

The 'issue' you raise is by design; you're specifying a width for the parent that is wide enough for your children to be wholly contained within (a 700px container for two 300px children). flex-wrap only causes elements to overflow when there's not enough space for the container to hold them. In your example, there is.

To force an overflow responsively, you could either specify a narrow width on the parent
(which will cause an overflow for all viewports):

.wrapper {
  width: 400px;
  margin: 0 auto;
  border: solid cadetblue 5px;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  height: 250px;
  min-width: 250px;
  max-width: 300px;
  flex: 1;
  background: mistyrose;
  border: solid goldenrod 2px;
  margin: 30px;
}
<div class="wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

Or use max-width instead
(which will only overflow on narrow viewports):

.wrapper {
  max-width: 700px;
  margin: 0 auto;
  border: solid cadetblue 5px;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  height: 250px;
  min-width: 250px;
  max-width: 300px;
  flex: 1;
  background: mistyrose;
  border: solid goldenrod 2px;
  margin: 30px;
}
<div class="wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

Upvotes: 1

Related Questions