This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Break long word with CSS
(6 answers)
Closed 3 years ago.
Hello I am vey new to HTML and CSS and I am trying to do a website for just learning it quickly. I am using flexbox and I have got a problem.
At first my flexbox items weren't at the same size (example: Image) but then I fixed it with using flex: 1; and it looked like this. They were all same size but they are all taking the longest size of each other and still when I do long paragraphs it's not working (example: Image). I want to do all my items at the same size independent from paragraphs and when I do long paragraphs I want them to go bottom row (example: Thats what I'm wanting). How can I do that?
Sorry for my bad English my English is not so good.
*{
margin: 0px;
padding: 0px;
}
.container-1 div{
border: 3px black solid;
padding: 120px;
margin-top: 50px;
}
.container-1{
display: flex;
justify-content: space-between;
}
.box-1{
margin-left: 1em;
flex: 1;
}
.box-2{
flex: 1;
}
.box-3{
flex: 1;
margin-right: 1em;
}
<div class="container-1">
<div class="box-1">
<h3>AAAAA</h3>
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="box-2">
<h3>AA</h3>
<p>a</p>
</div>
<div class="box-3">
<h3>AAAAAAAAAAA</h3>
<p>a</p>
</div>
</div>
You can add
p{ word-break: break-all }
to your CSS.
You can do like this
.container-1 {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.container-1 div {
border: 3px black solid;
padding: 16px;
margin-top: 50px;
word-break: break-word;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
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:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 1 year ago.
Below is simple example illustrating the problem. I have "Stackoverflow Stackoverflow" string and in first case it is displayed as a single line and in the second case word wrap happens. As you can see in the second case width of the div element is wider than a single "Stackoverflow" word. Is there a way to get rid of this empty space on the right? Resulting element has width 200px as specified per max-width but I want element to have actual width which is enough to fit it into 200px after word wrap.
body {
font-size: 30px;
}
.row {
margin-bottom: 10px;
}
.text-no-wrap {
background: yellowgreen;
white-space: nowrap;
display: inline-block;
}
.text-wrap {
max-width: 200px;
background: tomato;
white-space: normal;
display: inline-block;
}
<div class="row">
<div class="text-no-wrap">Stackoverflow Stackoverflow</div>
</div>
<div class="row">
<div class="text-wrap">Stackoverflow Stackoverflow</div>
</div>
You could try adding width: max-content; to the div's insde the .row
Note that width: max-content; isn't supported in Internet Explorer, but is supported on all other browsers.
Check the support of width: max-content; here.
I've added flex-direction: column; to the .row so the children of those
div's will appear underneath each other.
If you need display: flex; on the .row div, then This is the way to go. If you don't need display: flex; on the .row div, just simply remove it. And only use width: max-content; on the children;
body {
font-size: 30px;
}
.row {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.text-no-wrap {
width: max-content;
background: yellowgreen;
}
.text-wrap {
width: max-content;
background: tomato;
}
<div class="row">
<div class="text-no-wrap">Stackoverflow1 Stackoverflow2</div>
</div>
<div class="row">
<div class="text-wrap">Stackoverflow1 Stackoverflow2</div>
<div class="text-wrap">Stackoverflow1 Stackoverflow2</div>
</div>
I believe this one is not a text-wrap issue. If you check the following code you will get multiple spaces in between wrapping text. This one is due to the
max-width: 200px;
specified for
.text-wrap.
body {
font-size: 30px;
}
.row {
display: flex;
margin-bottom: 10px;
}
.text-no-wrap {
background: yellowgreen;
white-space: nowrap;
}
.text-wrap {
max-width: 200px;
background: tomato;
white-space: normal;
}
<html>
<body>
<div class="row">
<div class="text-no-wrap">Stackoverflow Stackoverflow</div>
</div>
<div class="row">
<div class="text-wrap">Stackoverflow Stackoverflow testing text wrapping space issue</div>
</div>
</body>
</html>
Go through the demo you can see that after "testing text" multiple spaces is there.
This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Closed 2 years ago.
I have a flex-container(row), where Im looking for the first object to be left justified at a static width, and then for the next object to be centered and fill the remainder of the container.
[ (obj1) | <----------(obj2)---------> ]
I know that I could accomplish this easier with the grid styling below, but my goal here is to educate myself in flex.
display:grid;
grid-template-columns: 100px 1fr;
Thanks!
Please see the code snippets for the flex implementation.
.wrapper {
display: flex;
}
.obj-a {
background: lime;
flex-basis: 100px;
}
.obj-b {
background: skyblue;
flex-grow: 1;
display: flex;
justify-content: center;
}
<div class="wrapper">
<div class="obj-a">obj-a</div>
<div class="obj-b">obj-b</div>
</div>
yes this can be done in flex
best read is here
you need to use
flex-shrink, flex-grow, flex-basis the short form as below
flex: shrink grow basis ie. flex: 1 1 auto
below is the example I use flex short-form and added a border for representation purposes.
* {
borx-sizing: border-box;
}
.flex-container {
display: flex;
flex-direction: row;
border: 1px solid black;
height: 200px;
padding: 1em;
}
.flex-container .left {
width: 100px;
border: 2px solid red;
height: 200px;
}
.flex-container .main {
flex: 1 1 auto;
border: 2px solid green;
height: 200px;
}
<div class="flex-container">
<div class="left"></div>
<div class="main"></div>
</div>
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/
This question already has answers here:
Flexbox fill available space vertically
(2 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 4 years ago.
According to the documentation on CSS-tricks, using justify-content: stretch, a flexbox child item should stretch within its container to fill the available space.
I have a flexbox container where I set the main axis to be column direction, then in this container I place two div flexbox items. I want them to fill the available vertical space equally (so I believe flex: 0 1 auto should do it).
Here is the JS fiddle:
body {
height: 100%
}
.container {
height: 300px;
display: flex;
flex-direction: column;
justify-content: stretch;
border: 1px solid grey;
}
.in {
height: 25px;
border: 1px solid black;
flex: 0 1 auto;
}
<div class="container">
<div class="in">Inside</div>
<div class="in">
Inside
</div>
</div>
As pointed out by #Temani Afif:
body {
height: 100%
}
.container {
height: 300px;
display: flex;
flex-direction: column;
justify-content: stretch;
border: 1px solid grey;
}
.in {
height: 25px;
border: 1px solid black;
flex: 1 1 auto;
}
<div class="container">
<div class="in">Inside</div>
<div class="in">
Inside
</div>
</div>