Controlling wrapping behavior in flexbox

Question

I have three divs inside a flex container. They are intended to exist in two rows:

First row:
- one with fixed width
- other should stretch on remaining width
Second row:
- one item

But div 1 stretches to 100% width (and pushes div 2 to the next line);

*{
  box-sizing: border-box;
}

.parent{
  display: flex;
  flex-flow: row wrap;
}

.parent > div{
  flex: 2 1 auto;
  
  border: 1px solid gray;
  text-align: center;
}


.parent > div.child1{
  background: lightblue;
}
.parent > div.child2{
  flex: 0 1 200px;
  background: lightgreen;
}
.parent > div.child3{
  flex-basis: 100%;
  background: lightcoral;
}


.parent > div.child1-1{
  background: lightblue;
  flex-basis: 80%;
  max-width: 80%;
}
.parent > div.child2-1{
  flex: 0 1 20%;
  background: lightgreen;
}

<div class="parent">
  <div class="child1">first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </div>
  <div class="child2">second</div>
  <div class="child3">third</div>
</div>
<br><br><br>
<div class="parent">
  <div class="child1-1">Should be like this, but with fixed width. <br>first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </div>
  <div class="child2-1">second</div>
  <div class="child3">third</div>
</div>

Here is an example: codepen.io

seems like that `flex-flow:row wrap` on the parent div should be removed? (I'm a little confused as to what your goal actually is here tho) — Scott Weaver, Jan 29 '18 at 17:28
@sweaver2112 How is it going to be possible to fill the requirement _"It should be two lines"_ if `wrap` is removed? — Asons, Jan 29 '18 at 17:45

score 1 · Answer 1 · answered Jan 29 '18 at 17:25

Applying flex:0 0 yourwidth to the first block seems to be what you are after.

* {
  box-sizing: border-box;
}

.parent {
  display: flex;
  flex-flow: row wrap;
}

.parent>div {
  border: 1px solid gray;
  text-align: center;
}

.parent>div.child1 {
  background: lightblue;
  flex: 0 0 70%;
  /* your required width here*/
}

.parent>div.child2 {
  flex: 1;
  background: lightgreen;
}

.parent>div.child3 {
  flex-basis: 100%;
  background: lightcoral;
}

<div class="parent">
  <div class="child1">first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first
    first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </div>
  <div class="child2">second</div>
  <div class="child3">third</div>
</div>

Michael Benjamin · Accepted Answer · 2018-01-29T18:22:07.147

.parent {
  display: flex;
  flex-flow: row wrap;
}

.parent > div.child1 {
  flex: 1;                 /* 1 */
  background: lightblue;
}

.parent > div.child2 {
  flex: 0 0 200px;         /* 2 */
  background: lightgreen;
}

.parent > div.child3 {
  flex: 0 0 100%;          /* 3 */
  background: lightcoral;
}

.parent > div {
  border: 1px solid gray;
  text-align: center;
}

* {
  box-sizing: border-box;
}

<div class="parent">
  <div class="child1">first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first
    first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </div>
  <div class="child2">second</div>
  <div class="child3">third</div>
</div>

Notes:

The first item is forced to remain on the first line by setting the flex-basis to 0, not the default auto. With this adjustment, flex-grow: 1 uses the free space on the line, without regard for the content size. Read more.
The second item is fixed width. It can't grow or shrink. It remains 200px.
The third item is set to always exist on its own line.

Thank you very much, this is what I need! – KAKtUs-74 Jan 30 '18 at 08:58 — KAKtUs-74, Jan 30 '18 at 08:58

Controlling wrapping behavior in flexbox

2 Answers2