This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 10 months ago.
I like to have a div that keeps all it's children in the center (vertical and horizontal). I can easily achieve this by using flexbox. But when my children width get bigger than the parent, overflow: scroll does not work
Codepen
Anybody know why and how can be fixed?
Update
My issue has been fixed. BUT, when I add a content to children, the content not showing correctly.
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
.children {
min-width: 1200px;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children"><h1>Welcome to my city, California</h1></div>
</div>
It looks like the child object is not actually 1200px - it's getting squished down to 500px. However, if you set min-width: 1200px; in the child component, it seems to override this and produces the behavior you expect.
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I am trying to horizontally center one div inside parent div (Which is display flex in column mode) using margin 0 auto. When I do this the inner div is getting shrinked to the size of its content. Can someone explain why this is happening and how to fix this?
HTML
<div class="container">
<div class="mydiv">
CENTER THIS DIV
</div>
</div>
CSS
.container{
background-color: brown;
height: 100px;
display: flex;
flex-direction: column;
}
.mydiv{
background-color: chartreuse;
max-width: 500px;
margin: 0 auto;
}
If I remove flex from parent, then I am getting the correct output :
However, with the flex properties as in above code, this is what I get :
When you use display: flex; in a parent, the children automatically get the default flex values:
The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "flex: 0 1 auto".
That's why your .mydiv adjusts to fit the text.
(more info: https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
If you don't want that to happen you could do something like this:
.container{
background-color: brown;
height: 100px;
display: flex;
flex-direction: column;
align-items: center; /* add this */
}
.mydiv{
background-color: chartreuse;
width: 100%; /* add this */
max-width: 500px; /* add this */
}
Working example:
https://codepen.io/sergiofruto/pen/dyMqbrm
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 3 years ago.
EDIT: added flex-direction: column, missed it in the initial code.
When the child has overflow:auto and the parent has overflow:auto, the scrollbars appear on the child.
But when overflow:auto is removed from the parent, the scrollbars appear on the grand-parent .
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
font-family: "Roboto", sans-serif;
}
body {
margin: 0;
padding: 0;
}
.App {
display: flex;
height: 100%;
}
.grand-parent {
display: flex;
flex-direction: column;
background: red;
overflow: auto;
padding: 20px;
}
.parent {
display: flex;
overflow: auto;
padding: 20px;
background: green;
}
.child {
overflow: auto;
font-size: 156px;
}
<div class="App">
<div class="grand-parent">
<div class="parent">
<div class="child">
Some content which grows bigger
</div>
</div>
</div>
</div>
Why is that? I would still expect the scrollbars to appear on the child.
How is the browser layout algorithm working here?
EDIT:
weirdly enough, the behavior seems to depend on the grand-parent having flex-direction: column. It works as I expect when flex-direction: row
tested on Chrome 75, firefox 67
This seems to have something to do with flex-direction on the grand-parent, if flex-direction is row, the horizontal scroll shows this behavior, if flex-direction is column, the vertical scroll shows this behavior
EDIT:
On further experiment, If we set min-height: 0 on parent, it behaves as expected, so this issue might be similar to
https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/
https://css-tricks.com/flexbox-truncated-text/
For overflow-y, the CSS property which controls how content overflows parent vertical edges, the default value is visible. Here is how it works:
Content is not clipped and may be rendered outside the padding box's top and bottom edges.
This means that if the content doesn't fit in the box, some content will be rendered outside the box.
This property is not inherited, however. The CSS below will not set the overflow property to auto on children of div with ID parent:
var parentElem = document.getElementById('parent');
var childElem = document.getElementById('child');
console.log('overflow-y property of parent element: ' + window.getComputedStyle(parentElem).overflowY)
console.log('overflow-y property of child element: ' + window.getComputedStyle(childElem).overflowY)
#parent {
overflow: auto;
}
<div id="parent">
<div id="child">
Some content
</div>
</div>
This means that when content overflows in children boxes, scrollbars are automatically displayed by browsers on parent boxes; you will have to specify explicitly the property on children nodes as needed.
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
How to use safe center with flexbox?
(3 answers)
Closed 5 years ago.
I have the following situation, the text get cuts off at the top when it not longer fits inside the container. What can I do to fix that? I'd still like the text to be centered if it's smaller than the container, and I can't change the container size.
div {
display: flex;
align-items: center;
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
}
<div>
sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>
The problem here is caused by the fact that when using align-items (or justify-content) to center a flex row item, it will, by design, overflow at its top/bottom (or left/right).
To solve that a new keyword, safe, is introduced, though not many browsers support it yet.
How to use safe center with flexbox?
The other option is to use auto margin's, though with the given markup you can't, as the text doesn't have an inner wrapper (well, it has an anonymous one, though those we can't target with a CSS selector).
So by adding an inner wrapper (fiddle with wrapper) you can use auto margin's, and is well explained here:
Can't scroll to top of flex item that is overflowing container
But sometimes we just can't change the markup, and when, here is a little trick, using the pseudo elements, and use auto margin's on them.
To vertical center the text we also need the flex direction to be column so the pseudo is rendered above/below.
Stack snippet
div {
display: flex;
flex-direction: column; /* added */
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
border: 1px solid gray;
}
div::before, div::after {
content: '';
}
div::before {
margin-top: auto; /* added */
}
div::after {
margin-bottom: auto; /* added */
}
<div>
sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>
<div>
sdjhf
</div>
If you wrap the text into another tag, and set margin: auto 0; it seems to be working well.
div {
display: flex;
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
background: pink;
margin-bottom: 20px;
}
span {
margin: auto 0;
}
<div>
<span>sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd</span>
</div>
<div>
<span>sdjhfkah</span>
</div>
This question already has answers here:
Hide scroll bar, but while still being able to scroll
(42 answers)
Closed 7 years ago.
I've run into trouble while trying to hide scrollbars from certain divs.
I found some solutions on the forum but they never really match my case so I'm still struggling with the problem.
My problem: I'm trying to hide scrollbars in a div that is nested inside another div that has non fixed size. (they are set to 100% of the body).
Here's the HTML:
<div id="events">
<div id="event-list"></div>
<div id="event-details"></div>
</div>
And the CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#events {
width: 100%;
height: 100%;
}
#event-list {
float: left;
width: 50%;
height: 100%;
background-color: pink;
}
#event-details {
float: right;
width: 50%;
height: 100%;
background-color: cyan;
}
Codepen available here
I would like #event-list and #event-details to have no scrollbar but still be scrollable. If you have any idea (css? js? jquery?), I'll take it!
Thanks in advance,
alex
You can do a nested div with the outer div's width set to 100% with overflow:hidden and the inner div set to a width of 105% (you can fine tune this value) and overflow set to overflow:scroll
JSFiddle here
This question already has answers here:
Horizontal scroll in DIV with many small DIV's inside (no text)
(2 answers)
Closed 9 years ago.
I have HTML structure like this :
<div class="wrapper">
<div class="fixed_column"></div>
<div class="fixed_column"></div>
<div class="fixed_column"></div>
</div>
Here is my CSS :
.wrapper{
width:500px;
float:left;
/*overflow-y:scroll;*/
overflow-x:scroll;
}
.fixed_column{
float: left;
height: 600px;
position: relative;
width: 250px;
}
So I want only two columns to fit inside my wrapper. And so without third column being present it fits inside.
Once I add the third column like in the HTML above, the third column doesn't stay in the same row but it drops to the next line and I end up with vertical scroller instead of horizontal. added overflow-x to my css and I don't get a horizontal scroll-bar but the third column still drops to the next line.
However I tried to increase wrapper to 750px and this time all three columns fit in the same line so I thought nothing is wrong with my css or did I think wrong?
Why would there not be horizontal scroll once my wrapper is 500px and I have three columns inside with width:250px on each.
Add white-space: nowrap; to the container, use inline-block instead of float, and use overflow-x instead of overflow-y.
This works:
http://jsfiddle.net/vXqY2/
.wrapper {
width: 600px;
white-space: nowrap;
overflow:scroll;
}
.fixed_column {
display: inline-block;
height: 100px;
width: 250px;
background-color: red;
}
The floated elements are going to automatically wrap down to the next level if they start going off the right of the parent container. That's how floats work. To keep them on the same line, you have a few options:
Make the parent container wider (as you did), but you'll need an extra element for the scrollbar
Switch from float: left; to display: inline-block; (as #Alex suggested), but you'll need to make concessions for IE7.
Switch from float: left; to display: table-cell;. Don't recommend this, I tried it and it turns out it's kind of painful :-p
See all techniques in a jsFiddle demo
It is because your fixed columns divs are only 250px so they never break the 505px container they are currently in.
Here try this.
example:
<div class="wrapper">
<div class="scroll-container">
<div class="fixed_column">A</div>
<div class="fixed_column">B</div>
<div class="fixed_column">C</div>
</div>
</div>
.wrapper {
width: 505px;
position:relative;
overflow-y: scroll;
overflow-x: scroll;
}
.scroll-container {
width:1000px;
}
.fixed_column {
float: left;
height: 600px;
position: relative;
width: 250px;
background-color: green;
}