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;
}
Related
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 4 months ago.
I have prepared the following simple sample
This code does not apply max-height to .b when flex-direction is row, and .b overflows.
However, when the flex-direction is column, the max-height is applied and the .b does not overhang due to the max-height. Why is this?
I tried changing align-items:stretch to a value such as flex-start, but I did not see any change.
https://jsfiddle.net/o2fsL9y8/
https://jsfiddle.net/o2fsL9y8/1/
<div class="a">
<div class="b">
</div>
</div>
.a {
max-height: 200px;
background: red;
display: flex;
flex-direction: row; /* or column */
}
.b {
overflow: auto;
background: blue;
flex: 1 1 auto;
height: 500px;
}
edit
When a large child element is created in .b as shown below, it scrolls without overflowing, regardless of whether flex-direction is specified for row or column.
The difference in behavior looks more and more unnatural, even though it should be doing almost the same thing as the code shown above. Why does it behave this way?
https://jsfiddle.net/o2fsL9y8/3/
<div class="a">
<div class="b">
<div style="height: 500px; background-color: yellow"></div>
</div>
</div>
.a {
max-height: 200px;
background: red;
display: flex;
flex-direction: row; /* or column */
}
.b {
overflow: auto;
background: blue;
flex: 1 1 auto;
}
overflow is applied to container not child. So that when the child overflows the container maintains its state and apply the overflow property that you have specified in the container.
<div class="a">
<div class="b">
</div>
</div>
.a {
max-height: 200px;
background: red;
display: flex;
flex-direction: row; /* or column */
overflow: auto;
}
.b {
background: blue;
flex: 1 1 auto;
}
This is hiding the overflow when column and not in row because in column layout the elements have to position with respect to how much height is available. But in row layout they only cares about how much width available and if something overflows you have to deal it within .a.
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:
How can I position my div at the bottom of its container?
(25 answers)
Closed 1 year ago.
I know this question came up many times but none of the suggested solutions is working for me so I opened up a code sandbox and made an example.
What I want
I want to place an item at the bottom of a div that already has some children. In my code sandbox the desired div to place at the bottom has a className of note__actions.
What I tried
Setting the container to position: relative and the item to position: absolute
Using flexbox and setting the container to display: flex and the item to align-self: flex-end
Multiple other things like vertical-align, and making empty items to fill up the space in-between
Div setup
<div className="flexBoxContainer" />
<div className="item">
<div>Header</div>
<div>Title</div>
<div>Paragraph</div>
<div className="bottom__item">Actions>/div> // Only this div should go to the bottom of the "item" div
</div>
</div>
Sandbox
https://codesandbox.io/s/infallible-sound-wf166?file=/src/App.js
Give the container display: flex; justify-content: space-between; - that will pull the content from top to bottom. If you want only the last item on the bottom and the rest on the top, wrap the rest with a div, like
<div className="flexBoxContainer" />
<div className="item">
<div>
<div>Header</div>
<div>Title</div>
<div>Paragraph</div>
</div>
<div className="bottom__item">Actions>/div>
</div>
</div>
You are already using flexbox which is great. Now, use margin-top:auto on note__actions to push the div to the bottom.
.note__actions {
margin-top: auto;
}
You could add a flex: 1; to the flexible content, for instance
.note {
background-color: rgb(255, 255, 211);
border-radius: 15px;
height: 400px;
width: 200px;
padding: 24px;
display: flex;
flex-direction: column;
}
.note-content {
flex: 1;
}
.note-action {
align-self: flex-end;
}
<div class="note">
<div>Peter Holbert - 09. Jul 21 23:28</div>
<div>Note Title</div>
<div class="note-content">Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="note-action">Action 1</div>
</div>
You can use a grid for that.
Change this in your Style on codesandbox.io:
.note {
background-color: rgb(255, 255, 211);
border-radius: 15px;
width: 200px;
padding: 24px;
display: grid;
/*flex-direction: column;*/
grid-template-rows: 50px 80px 1fr 80px; /* height: 100%; */
/* align-items: flex-end; */
/* position: relative; */
}
.note__actions_bot {
background-color: red;
height: 100px;
display: grid;
justify-content: center;
align-items: center;
}
I recommend this awesome Video to get a nice overview and some hint's how to do, and when to use which one of flex, grid and other solutions:
https://www.youtube.com/watch?v=qm0IfG1GyZU&feature=youtu.be
Add margin-top : auto to the note__actions element
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%;
}
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/