Reputation: 13
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
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:
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.Upvotes: 1
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