This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 1 year ago.
We have text-elements with defined spacings in between them. They can be multiline.
Now if the text breaks inside of them, width:auto is not correct - it somehow should be recalculated after the text broke onto new lines.
Current situation:
Desired situation:
I created a simple fiddle for it: https://jsfiddle.net/zd73vfne/
max-width: 260px
is just for demonstration purposes, so the text breaks.
Using word-break is not an allowed solution per requirement.
I've added another example with multiple boxes next to eachother, which shows the problem even better: https://jsfiddle.net/zd73vfne/2/
Is there a pure CSS solution?
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 15 days ago.
Codepen: https://codepen.io/andrerpena/pen/JjBzKNg
I would like the button bar to always be visible where the blue --> is pointing, when the screen squeezes.
My document structure is like this:
div[#id='title']
div[#id='body'] <-- This should grow
div[#id='body-content'] <-- This should grow and be scrollable
div[#id='body-buttons'] <-- This should be fixed at the bottom
According to the above structure, I'd expect body-content to scroll and body-buttons to always be visible.
Why is it not? Is there any way to fix it without changing the DOM structure? If not, how would you change it?
I'm personally interested in knowing why it doesn't work, because I do CSS for more than a decade and I still get surprised by stuff like this.
Thanks.
Flex child has an initial value min-height: auto which means that it will not have height less than the content height (the texts). In this case you can add min-h-0 class to the div[#id='body'] (#body) element so that it doesn't have to have a minimum height. Here's the working codepen.
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 1 year ago.
This has 2 fixes...which is really weird to me.
1: If I remove the tag #MARGIN-30 and Remove the tag #Nav-bar under margin-3 it fixes itself when I reapply said tags.
2: If I add overflow:hidden;
The question is, is anyone able to assist me with the reason for this happening, like...I've never had this on any prior project or learning experience with css.
It appears as though you are falling victim to Margin Collapse. It's just one of those many things that are a bit weird in HTML/CSS.
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.
This question already has answers here:
Pin element like position: fixed but inside its parent not the viewport
(3 answers)
Closed 4 years ago.
I'm building table that should be fully responsive (so I'm using flex on divs instead of table).
I want to be able to pin column.
Here what I've got https://codepen.io/piernik/pen/LmoBxM
What's the problem?
When You scroll left pinned column disapears.
It's probably that .row2 has width of viewport, not entire table.
You can see .row2's width on the red top border.
Can I fix it?
I want to build responsive table with pinned column that can have hsrcoll without any JS.
You used flex-basis:500px in cell that's why your table width larger than windows width and flex cover only all window width.
This question already has answers here:
What is the point of CSS collapsing margins?
(1 answer)
Margin on child element moves parent element
(18 answers)
Closed 7 years ago.
Could someone explain to me what are the possible benefits of the CSS behavior where a child elements top and bottom margins render outside the block-parents render bounds?
See this fiddle for a super simple example. The pink div is affected by the h1's margins.
I'm guessing it has something to do with collapsing margins, but it's really not clear to me.
styles by straight:
Body.
Pure html.
Css..
is pure html. he will affect all divs.
This question already has answers here:
Stretch image in iron-image element
(4 answers)
Closed 7 years ago.
Check out this jsbin
I want my images have auto height with sizing="contain", it means they won't have extra space. In my example those extra space are in red.
iron image is required to set a fixed height otherwise image not display, I tried height:auto and height:100% but not work.
I was using paper-material, should use paper-card