This question already has answers here:
CSS Width / Max-Width on Line Wrap?
(3 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 3 years ago.
I have some text inside a div.
The parent of the div that holds the text has a specific width and display: flex;
I want the width of the container that holds the text to be as wide as its longest textline (in the fiddle this would be the line "WordyWords in").
I know this can be done by: display: inline, but this only works, when the parent does not have display: flex anymore.
.width{
width: 150px;
display: flex;
}
.text{
font-size: 20px;
line-height: 20px;
display: inline;
background-color: red;
}
.width2{
width: 150px;
}
.text2{
font-size: 20px;
line-height: 20px;
display: inline;
background-color: red;
}
This is what I have
<div class="width">
<div class="text">Veryvery long WordyWords in here</div>
</div>
<br>
This is kind of what I want, but I want to keep the <span style="background-color: #f2f2f2">display: flex;</span> attribute in the parent
<div class="width2">
<div class="text2">Veryvery long WordyWords in here</div>
</div>
Like shown in the picture, I would like the div .text to end right after the letter of the longest textline like display: inline does this. (The red line is where the .text div should end.) But I want to keep display: flex property on my parent. Is this even possible with flex set on the parent?
Related
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 1 year ago.
Good evening! I am trying to center a two lines span. If the width of the screen is big enough for the span to keep everything on the same line it is fine, it is centered and the span background wraps the text. If i go for a small width though, it will break in two lines and have the span background full width. I want to keep the blue background wraping the text span. What is this behaviour? Also if i do not put text-align: center; the span on two lines will not even be centered, so the flex is not considered.
html:
body{
margin:0;
padding:0;
}
.text-container{
background-color: red;
display:flex;
justify-content: center;
align-items:center;
flex-wrap: wrap;
}
.text {
background-color: blue;
text-align:center;
}
<div class="text-container">
<span class="text">OPORTUNITATI PROFESIONALE</span>
</div>
This question already has answers here:
Why does inline-block cause this div to have height?
(7 answers)
Closed 2 years ago.
I've run into an interesting problem with line-height.
.text {
font-family: sans-serif;
font-size: 11px;
line-height: 12px;
}
.container {
display: flex;
}
<div class="container">
<div class="text-container"><span class="text">Hello</span></div>
<span class="text">Hello</span>
</div>
In this fiddle above there are 2 spans, both with font-size and line-height set, inside a flex container. One of the spans is inside a div and the other one isn't.
The spans themselves have a height of 12px, but the div has a height of 18px, causing the two spans to be out of line. If I add line-height: 0; to the div, then the problem is fixed and the div is 12px tall.
The spans must be on the same line, and one of them must be inside a container. display: block works, but for my purposes this element needs to be inline for certain use cases.
What's causing the div to have this extra height, and is there a nicer solution than having to set line-height: 0; on the div?
I found the answer here. It's to do with how line-height is calculated for inline elements. I've fixed it by setting font-size: 0; on the div containing the span.
The display on the span elements are different. The one inside the div has a display: inline, while the span standalone is display block. If you would like them to react the same, simply put a display on the element.
If you set line-height: 12px; on the container it kind of works. But if you look closely there is still a small space.
.text {
font-family: sans-serif;
font-size: 11px;
line-height: 12px;
}
.container {
display: flex;
line-height: 12px;
}
<!DOCTYPE html>
<body>
<div class="container">
<div class="text-container">
<span class="text">Hello</span>
</div>
<span class="text">Hello</span>
</div>
</body>
This question already has answers here:
How to have child div of a flex, have its children full height [duplicate]
(1 answer)
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I have been stuck on this and frankly don't even know how to google it, all my google efforts were fruitless. My HTML is as below:
<div class="uk-flex uk-flex-column uk-height-1-1">
<!-- normal div with height 100vh and flexbox of flex column -->
<div>div that will have height fit contents</div>
<div class="uk-flex-1">
<!-- div that will fill the remaining space -->
<div class="uk-height-1-1">div that should fill the height of the parent</div>
</div>
<div>div that will have height fit content</div>
</div>
Now my main problem is having the grand child div (.uk-height-1-1) to have its height fill the parent, how do I make its height fill the height of the parent div??
NOTE: The below links of questions I have been through them before, they do not answer my question
Fill remaining vertical space with CSS using display:flex
Make a div fill the height of the remaining screen space
UPDATE: Am using uikit, I posted the question initially the way it is to simplify the question, uk-height-1-1 = height: 100%
Best way to tackle something like this is assign borders to things when you are trying to see how the layout is
.viewport-height {
display: flex;
border: 1px solid blue;
height: 500px;
}
.flex-1 {
border: 1px solid red;
}
.full-height {
border: 1px solid greenyellow;
height: 100%;
}
If you look in the css above the .full-height is now the same height as the flex-1
If I understood your question, then this should be what you are looking for. Let me know if you need any additional help.
.viewport-height {
height: 100vh;
display: flex;
flex-direction: column;
}
.flex-1 {
display: flex;
flex: 1;
background-color: green;
align-items: center;
}
.div-with-height {
height: 50px;
}
full-height {
height: 100%;
}
<div class="viewport-height flex-column">
<!-- normal div with height 100vh and flexbox of flex column -->
<div class="div-with-height">div that will have height fit contents</div>
<div class="flex-1">
<!-- div that will fill the remaining space -->
<div class="full-height">div that should fill the height of the parent</div>
</div>
<div class="div-with-height">div that will have height fit content</div>
</div>
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I've been trying to do the simple and mundane task of centering divs in CSS with no success.
Here's the code snippet:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#content {
}
.list-item {
position: relative;
display: inline-block;
border: solid thin #444;
}
.list-item .scene {
width: 200px;
height: 200px;
}
.list-item .description {
width: 200px;
margin-top: 0.5em;
}
.storyboard-row {
display: flex;
/* Method 1 */
/*justify-content: center;*/
/* Method 2 */
/*margin-left:auto;*/
/*margin-right:auto;*/
}
<div id="content">
<div class="storyboard-row">
<div class="list-item">
<div class="description">Scene 1</div>
<div class="scene"></div>
</div><div class="list-item">
<div class="description">Scene 2</div>
<div class="scene"></div>
</div><div class="list-item">
<div class="description">Scene 3</div>
<div class="scene"></div>
</div>
</div>
</div>
What I'm trying to center: The div with class="storyboard-row" in relation to the div with id="content"; and the div with id="content" in relation to its parent (the <body>).
What I tried: In the snippet you will find "Method 1" and "Method 2" which are my attempts at centering stuff around. The first method, using justify-content: center;, works but on downsizing the window, the leftmost squares will be pushed outside off the screen. The second method simply does nothing. Bootstrap can be used.
What I need to continue to happen: Currently the div with class="storyboard-row" has display: flex; which I used so that when downsizing the window, a scrollbar appears instead of pushing down a number of squares (which happens with block). In the snippet, only one row is shown, but the idea is to have multiple (each bellow the former).
EDIT: Thanks to #TemaniAfif the centering problem was fixed. However, because the div with id="content" now has display: flex, when rows are small enough in relation to the screen, they appear on the same line. An updated snipped can be found here: https://jsfiddle.net/hdnz34g8/
If I remove the display: flex from it, the rows appear as intended, line-wise, but they're no longer centered.
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
I'd like to know the reason why it aligns differently when there is text or any other element inside the div with display: inline-block? I know vertical-align fixes it, but I am curious to know how the browser determines to display like that.
div {
width: 100px;
height: 100px;
background: #dd6b4d;
display: inline-block;
/* vertical-align: top; */
}
.inner {
width: 50px;
height: 50px;
background: green;
}
<html>
<body>
<div></div>
<div>aaa</div>
<div>
<div class="inner"></div>
</div>
</body>
</html>
The default value of vertical-align (if you declare nothing), is
baseline
Unless it is overridden, this rule applies. When text is put in the inline-block, that text will create a baseline for the inline-block.
For reference, here is the article on CSS-Tricks