Wrapping only part of the row (next to a full height column)

Question

I have a banner which is like this right now:

is like this right now

but I essentially want it to look like this:

look like this

I have a tall(er) map, a box for date range, a box for zip, a box for keywords that I want in a single line. Because the map is tall, I want the next box, the operations (which is not tall), to go right underneath the date range, zip, and keyword boxes, but also to the right of the map (not underneath the map!)

I've been trying and trying not able to crack this...can't seem to find a similar example online. Can you help me please?

Code with my work: http://jsfiddle.net/susanc/227f4660/14/

* {
  box-sizing: border-box;
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>#daterange {
  background-color: yellow;
  flex: 1 0 25%;
  text-align: center;
  padding: 10px;
}

.flex>#zip {
  background-color: lightgreen;
  flex: 1 0 25%;
  text-align: center;
  padding: 10px;
}

.flex>#keywords {
  background-color: lightblue;
  flex: 1 0 25%;
  text-align: center;
  padding: 10px;
  flex-grow: 1;
}

.flex>#operations {
  background-color: red;
  flex: 0 1 75%;
  text-align: center;
  padding: 10px;
}

.flex>#map {
  flex: 1 0 25%;
  background-color: pink;
  text-align: center;
  padding: 10px;
}

<div class="flex">
  <div id="map">map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map
    map map map map map map map map map map map map map map map map map map map map map </div>
  <div id="daterange">daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange </div>
  <div id="zip">zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip </div>
  <div id="keywords">keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords </div>
  <div id="operations">operations operations operations operations operations operations operations operations operations operations operations operations</div>
</div>

score 2 · Accepted Answer · answered Mar 29 '18 at 00:42

The layout you want doesn't come naturally for flex because you're trying to assemble a two-dimensional grid and flexbox is a one-dimensional layout system.

The problem is explained in detail here:

Is it possible for flex items to align tightly to the items above them?

If you really want a flex solution, the post above provides options, and this post may be helpful, too:

Calculator keypad layout with flexbox

However, the simple, easy and efficient method for building your layout uses CSS Grid:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
}

#map { 
  grid-row: 1 / 3; 
}

#operations {
  grid-column: 2 / 5;
}

#map        { background-color: pink; }
#daterange  { background-color: yellow; }
#zip        { background-color: lightgreen; }
#keywords   { background-color: lightblue; }
#operations { background-color: red; }
.grid > div { text-align: center; padding: 10px; }
*           { box-sizing: border-box; }

<div class="grid">
  <div id="map">map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map </div>
  <div id="daterange">daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange </div>
  <div id="zip">zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip </div>
  <div id="keywords">keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords </div>
  <div id="operations">operations operations operations operations operations operations operations operations operations operations operations operations</div>
</div>

jsFiddle demo

Thank you so much! This really helped me understand a better way to format everything. I understand now when I should and should not use flex. I really appreciate it! — momochin, Mar 29 '18 at 00:49

score 0 · Answer 2 · edited Apr 09 '18 at 18:24

I think you need a little more structure inside to get the layout you're after. Conceptually, everything to the left of your "map" div is another column. Within that column, there's a row with the date, zip and keyword divs…

* {
  box-sizing: border-box;
}

#outercontainer {
  display: flex;
  flex-direction: row;
}

#leftcolumn {
  flex: 0 1 75%;
  display: flex;
  flex-direction: column;
}

#leftrow {
  display: flex;
  flex-direction: row;
}

#daterange {
  background-color: yellow;
  flex: 1 0 25%;
  text-align: center;
  padding: 10px;
}

#zip {
  background-color: lightgreen;
  flex: 1 0 25%;
  text-align: center;
  padding: 10px;
}

#keywords {
  background-color: lightblue;
  flex: 1 0 25%;
  text-align: center;
  padding: 10px;
  flex-grow: 1;
}

#operations {
  background-color: red;
  text-align: center;
  padding: 10px;
}

#map {
  flex: 1 0 25%;
  background-color: pink;
  text-align: center;
  padding: 10px;
}

<div id="outercontainer">
  <div id="map">map </div>

  <div id="leftcolumn">
    <div id="leftrow">
      <div id="daterange">daterange </div>
      <div id="zip">zip </div>
      <div id="keywords">keywords </div>
    </div>

    <div id="operations">operations </div>
  </div>
</div>

Wrapping only part of the row (next to a full height column)

2 Answers2

jsFiddle demo