KAKtUs-74
KAKtUs-74

Reputation: 13

Controlling wrapping behavior in flexbox

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

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

Upvotes: 1

Views: 379

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 372264

.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:

  1. 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.
  2. The second item is fixed width. It can't grow or shrink. It remains 200px.
  3. The third item is set to always exist on its own line.

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115383

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>

Upvotes: 1

Related Questions