This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
How to hide overflowing content in CSS?
(3 answers)
Closed 1 year ago.
I have 3 DIV components where:
.child-left: aligns its contents to the left on the screen
.child-center: aligns its contents to the center on the screen
.child-right: aligns its contents to the right on the screen
However, when the contents (or text) get really long in .child-center, the contents overflow each other even though it has its own width. Please see the below screenshot:
I'd like to know:
Why the content (Long text...) in .child-center does not fit within the width?
How do I fix the issue with the minimal changes? (I'd like to keep using display: flex, I DO NOT want to use text-align: center)
What I want to achieve is this:
Please help me out!
Code:
.parent {
display: flex;
align-items: center;
width: 100%;
}
.child-left {
display: flex;
justify-content: flex-start;
width: 20%;
background-color: green;
white-space: nowrap;
}
.child-center {
display: flex;
justify-content: center;
width: 60%;
background-color: red;
white-space: nowrap;
}
.child-right {
display: flex;
justify-content: flex-end;
width: 20%;
background-color: yellow;
white-space: nowrap;
}
<div class="parent">
<div class="child-left">
<span>11111111111111111111111111</span>
</div>
<div class="child-center">
<span>Long text Long text Long text Long text Long text Long text Long text Long text Long text</span>
</div>
<div class="child-right">
<span>22222222222222222222222222</span>
</div>
</div>
Related
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed last month.
If you run the code snippet below you can see that the width used for the top <div> is 200px (max-width). But in reality it doesn't need to use the max-width because the last <p> is wrapped. Instead, the wanted result is to use the width that the bottom <div> uses (~140px).
How can I use the preferred width and still get the item to wrap?
div {
max-width: 200px;
width: fit-content;
display: flex;
flex-wrap: wrap;
gap: 8px;
background-color: green;
margin-bottom: 8px;
}
p {
background-color: red;
}
<div>
<p>
test
</p>
<p>
this is a long text
</p>
<p>
short text
</p>
</div>
<div>
<p>
test
</p>
<p>
longer text
</p>
</div>
If my understanding of the question is correct, you can achieve this by using the flex-basis on the p elements instead of max-width on the div :
div {
min-width: 140px;
width: fit-content;
display: flex;
flex-wrap: wrap;
gap: 8px;
background-color: green;
margin-bottom: 8px;
}
p {
flex-basis: auto;
background-color: red;
}
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How do I vertically align text in a div?
(34 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
As shown in this fiddle, I have a set of divs. I want them to stretch over the available vertical space and to keep their contents vertically centered. And I'm a great fan of flex, too. In the markup below, I get stuck.
<div class="outer">
<div class="inner">Uno</div>
<div class="inner">Duo</div>
</div>
Using the class below, the stretch is there but the text is at the top.
.beep { align-self: stretch; ... }
When I switch to this, the centering occurs as required but the stretch disappears.
.boop { align-self: center; ... }
How should I approach it to work as I want? I've tried playing around with the following styles both on the component itself and its parent.
.blopp{
vertical-align: middle;
align-items: stretch;
align-content: stretch;
}
Finally, I got it working but using a horrible set of parent-child-grandparent-subchild atrocity as HTML markup. Even I can see that it's an ugly hack that will bite me in the donkey being obviously unstable.
As far I'm experienced with display flex, it's my understanding that things are easy or you do it wrong. Well, this was not easy...
For you rest elements (which is also a flexbox), you should be using align-items: center for centering the text inside (you have used align-self: center which centers the rest as a flex item inside the outer flexbox).
See demo below:
div.outer {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
display: flex;
width: 100%;
height: 101px;
border: 3px solid pink;
}
div.inner {
padding: 10px;
background: lightgray;
border: 1px solid darkgray;
display: flex;
}
div.first {
flex: 3;
}
div.rest {
flex: 1;
justify-content: flex-end;
align-items: center; /* <-- note this */
}
<div class="outer">
<div class="first inner">I'm the first</div>
<div class="rest inner">we're</div>
<div class="rest inner">the</div>
<div class="rest inner">rest</div>
</div>
This question already has answers here:
Vertically align text next to an image?
(26 answers)
How can I vertically align elements in a div?
(28 answers)
Why can't the <p> tag contain a <div> tag inside it?
(6 answers)
Closed 3 years ago.
Say I have the following code
p {
display: inline;
}
div {
display: inline-block;
width: 100px;
height: 50px;
background: black;
}
<p>
Some text
<div>
</div>
</p>
What is created is this
Here the inline and inline-block elements are not vertically centered.
How would I make it look like this :
I have used flex css and also add one new div
I hope this will help you.
p {
display: inline;
margin: 0;
}
.inner-div {
display: inline-block;
width: 100px;
height: 50px;
background: black;
}
.outer-div{
display: flex;
align-items: center;
display: -webkit-flex;
-webkit-align-items: center;
}
<div class="outer-div">
<p>Some text</p>
<div class="inner-div"></div>
</div>
just add float left to tag
p{
display: inline;
float:left;
}
This will align both element properly
This question already has answers here:
Chrome does not expand flex parent according to children's content [duplicate]
(3 answers)
Closed 4 years ago.
I have a nested flex container. Here is the code:
<div class="parent-container">
<div class="child-container">
<span class="color-block"></span>
<span>This is a long long long long long text.</span>
</div>
</div>
.parent-container {
display: flex;
background: orange;
}
.child-container {
display: flex;
background: green;
}
.color-block {
background: yellow;
flex: 0 0 15px;
align-self: stretch;
}
Look at the result at https://codepen.io/crupest/pen/Lqwxpp.
This is the least code that reproduces my problem. Of course there are other elements in parent container.
My question is that why the last word "text" wraps even when there is remaining space at right? And how to make it not wrap? Or is there any workaround?
Thanks!
Update:
My purpose is that I want a color label in front of the text.
Thanks for #Kata Csortos pointing out that I need to say my purpose.
JsFiddle
.color-block {
background: yellow;
flex: 0 0 0;
align-self: stretch;
padding-left: 15px;
}
Why don't you try like this above code? Remove flex: 0 0 15px to flex: 0 0 0 and then add padding-left:15px;
use whitespace: nowrap; to unwrap in same line
.child-container {
display: flex;
background: green;
white-space: nowrap;
}
What you is your goal with this, how should it look like?
If you put the span within another div with flex display and put padding on it for example, the text wont wrap.
HTML
<div class="parent-container">
<div class="child-container">
<div class="color-block">
<span>This is a long long long long long text.</span>
</div>
</div>
</div>
CSS
.parent-container {
display: flex;
background: blue;
}
.child-container {
display: flex;
padding-left: 20px;
background: green;
}
.color-block {
background: yellow;
padding: 5px 10px;
align-self: stretch;
display: flex;
}
Also made a nicer version using ::before pseudo element, check it out here:
https://jsfiddle.net/de6n1sr7/
I've got a div with display: flex. Its content is centered horizontally and vertically.
When content is too long in the div, the content wraps. But the alignment is broken in this case. See the snippet.
If I add text-align: center it displays correctly. But why doesn't it center without text-align: center?
.box{
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 10px;
}
.flex{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.with-align{
text-align: center;
}
<div class="box flex">
some long text here
</div>
<div class="box flex with-align">
some long text here
</div>
The HTML structure of a flex container has three levels:
the container
the item
the content
Each level represents a separate, independent element.
The justify-content property, which is set on flex containers, controls flex items. It has no direct control over the children of the item (the text, in this case).
When you set justify-content: center on a row-direction container the item shrinks to the content width (i.e., shrink-to-fit) and is horizontally centered. The content, being inside the item, goes along for the ride.
Everything is centered nicely, when the content is narrower than the flex container.
On the other hand, when the content is wider than the flex container, the flex item can no longer be centered. In fact, the item cannot be aligned at all (start, end, center) because there is no free space – the item is consuming the full width of the container.
In such cases, the text can wrap. But justify-content: center doesn't apply to the text. It never did. The text was always subject to the default text-align: start (left in LTR / right in RTL).
Therefore, to center the text directly, add text-align: center to the flex item (or the flex container, it doesn't really matter due to inheritance).
article {
display: flex;
align-items: center;
justify-content: center;
}
.center {
text-align: center;
}
/* demo styles only */
article {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightgreen;
}
<article>
<p>some long text here</p>
</article>
<article>
<p class="center">some long text here</p>
</article>