Menu
I have the below example and I want to display the blue item text on a single line all the time no matter how much text I will have inside. (dynamic content) Basically I want the red item to get smaller in width when the blue item has more text.
Is there any way to achieve this ?
Thx
PS. Don't ask why I use flex here. I use it into a bigger example where I need it, this example is simplified.
.flexbox {
display: flex;
}
.red {
background: red;
}
.blue {
background: blue;
}<div class="flexbox">
<div class="red">red red red red red red red red red red red red red red red red red red red red red red </div>
<div class="blue">blue blue blue blue blue</div>
</div>
404
Aligning one item with align-self This means you can explicitly declare the align-self property to target a single item. The align-self property accepts all of the same values as align-items plus a value of auto , which will reset the value to that which is defined on the flex container.
When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100% , and enable wrap on the container. The item now consumes all available space.
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
Using an element to break to a new flex row comes with an interesting effect: we can skip specifying the width of any item in our flex layout and rely completely on the line breaks to define the flow of our grid. This produces a layout with two vertically stacked full-width items (I've added a border to the .
You can use flex-shrink:0ref on the blue part:
.flexbox {
display: flex;
margin:10px;
}
.red {
background: red;
}
.blue {
background: blue;
flex-shrink:0;
}<div class="flexbox">
<div class="red">red red red red red red red red red red red red red red red red red red red red red red </div>
<div class="blue">blue blue blue blue blue blue blue blue blue blue blue</div>
</div>
<div class="flexbox">
<div class="red">red red red red red red red red red red red red red red red red red red red red red red </div>
<div class="blue">blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue </div>
</div>Or the old white-space:nowrap:
.flexbox {
display: flex;
margin:10px;
}
.red {
background: red;
}
.blue {
background: blue;
white-space:nowrap;
}<div class="flexbox">
<div class="red">red red red red red red red red red red red red red red red red red red red red red red </div>
<div class="blue">blue blue blue blue blue blue blue blue blue blue blue</div>
</div>
<div class="flexbox">
<div class="red">red red red red red red red red red red red red red red red red red red red red red red </div>
<div class="blue">blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue </div>
</div>Another idea is to set flex:1 to the red part. This will allow the content of the blue part to break into multiple lines when the red one can no more break:
.flexbox {
display: flex;
margin:10px;
}
.red {
background: red;
flex:1;
}
.blue {
background: blue;
}<div class="flexbox">
<div class="red">red red red red red red red red red red red red red red red red red red red red red red </div>
<div class="blue">blue blue blue blue blue blue blue blue blue blue blue</div>
</div>
<div class="flexbox">
<div class="red">red red red red red red red red red red red red red red red red red red red red red red </div>
<div class="blue">blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue </div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
