I have a container that adds a vertical scrollbar and i don't know how to fix it
.albums {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
gap: 10px;
flex-wrap: wrap;
overflow: auto;
}
I tried to align vertically the items inside of the container so i added min-height, but now i have a vertical scrollbar in my website.
the contents of your albums object are overflowing it's area. By setting overflow to auto, a scrollbar is shown, when the content gets bigger in any direction.
I think you want to use this:
overflow-x: auto;
overflow-y: hidden;
Or set overflow property to hidden, if you don't want to have any scrollbars at all. More information on overflow property here: https://www.w3schools.com/cssref/pr_pos_overflow.php
But be aware of the possibility of invisible content flowing outside of albums box.
Related
I'm trying to find a way to have a div expand down to the footer even when its content isn't big enough, preferable with CSS but a React solution is welcome as well. It should scroll within itself without pushing down the footer, which is fixed at the bottom.
Currently I have the contentArea with the following CSS...
position: sticky;
overflow-y: scroll;
height: 60vh; //this shouldn't be set, should just expand down to its sibling container, the footer, at the bottom
The container's parent has the position:relative styling.
There are similar solutions on here but they all require setting 100vh on the body, or styling the body in some way, and I can't do that as this is a standalone React component. The component starts at the blue dropdown, the one with Step 1 of 5 in it
You can try:
.parentContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.selectedContainer {
flex: 1;
}
I have a layout with a full height side-menu and two tabs. In one of the two tabs, I have a very big (fixed height) content which overflow the body. I've set overflow: auto on the tab container.
I want the tabs to be full height and if the content overflow, a scroll. It barely works but the container on the second tab does not contain all the tab.
I've reproduced the bug on this CodeSandbox: https://codesandbox.io/s/L84M9rOgD
I've tried to use align-items: start on the tab container, it fixes the second tab but breaks the first one being full height..
Try this demo
Add the below styles
.panelContent {
flex: 1;
padding: 30px 40px;
display: flex;
background: white;
overflow-y: auto;
}
.panelIsActive {
display: flex;
overflow-y: auto;
}
Demo here
The key to achieve this is to have the whole container having a real height (using height: 100vh or sticking it to whatever you want with position: absolute).
After that, things get easier, as the overflow will behave as expected. To ensure the flex-grow will not "compress" other blocks, ensure you have flex-shrink: 0 set to siblings (cf demo, because it feel that my textual explanation is not clear as crystal).
I'm fairly new to flexbox, and can't figure out how to do what I'm trying. I'd like for the repeated content to stack horizontally to the right. I would like the items to shrink to fit the width of the content (if the title/report id text is longer/shorter). I'm trying to make the red box only as wide as the content and stack to the right. The purple box(container) is flex. It seems like the red div is the culprit that I can't figure out. I've tried converting to inline-block and played with the flex-grow and flex-shrink, but nothing seems to work for me. There might be a style somewhere else in the project that is competing, but not sure what to look for if that's the case...
Styles of the purple container div:
line-height: 1.5;
display: flex;
flex-direction: column;
max-height: 22.8125rem;
padding-bottom: .5rem;
margin-bottom: 1rem;
background-color: #394b54;
flex-basis: 100%;
-webkit-box-flex: 1;
flex-grow: 1;
I'd like for the repeated content to stack horizontally to the right
Use the default flex-direction: row.
I would like the items to shrink to fit the width of the content
Use the default flex-grow: 0 and flex-basis: content.
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 6 years ago.
HTML:
<div id="container">
<div class="item">Foo</div>
<div class="item">Bar</div>
</div>
CSS:
#container {
display: flex;
justify-content: center;
overflow: auto;
}
.item {
flex-grow: 1;
min-width: 200px;
max-width: 300px;
}
When the above container shrinks to less than 400px, a horizontal scroll bar appears as expected. However, the first item becomes partially obscured by the left edge of the container, even when scrolled all the way to the left. As the container shrinks, more of the item is obscured.
Demo: http://jsfiddle.net/FTKcQ/. Resize result frame to observe. Tested in Chrome 30 and Firefox 24.
If justify-content is changed from center to to any other value (e.g. space-between), then all content is visible by scrolling. Why do centered items behave differently?
The goal here is to have a row of centered items, each of which will grow in width between some range. If the container cannot fit all minimal-width items, it should scroll to display them all.
According to MDN (Flex item considerations), this behavior is expected for now:
Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container. This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge, as you can't scroll to that area, even if there is content there! In a future release, the alignment properties will be extended to have a "safe" option as well.
For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the align- properties, just put auto margins on the flex items you wish to center. Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container.
So, you can achieve then expected result, using margins for alignment. Just add margin-left: auto for first item and margin-right:auto for last.
My demo: http://jsfiddle.net/WFxQk/
try with style sheet
#container {
background-color: green;
display: flex;
/* justify-content: center */ ;
align-items: center;
overflow: auto;
}
.item {
background-color: white;
border: 1px solid black;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
min-width: 200px;
max-width: 300px;
margin: auto;
}
I removed justify-content, making it to the default flex-start. And, added margin:auto which seems that it makes center alignment.
Updated Demo: http://jsfiddle.net/FTKcQ/1/
I have a flexbox with a single item. This item is horizontally and vertically centered. When the item grows taller than its container it overflows equally at the top and the bottom of the container. I would like it to only overflow at the bottom, and remain anchored at the top. Any ideas?
http://codepen.io/wilsonpage/pen/LzryK (view in Chrome Canary for latest Flexbox)
Under the standard Flexbox draft, a single flex item can be vertically and horizontally centered by using margin: auto. You'll want to use this instead of the align-items property:
http://codepen.io/cimmanon/pen/EJdvn
section {
display: flex;
justify-content: center; /* you can remove this here, but its not hurting anything */
/* remove align-items */
height: 80%;
margin: 5% 0;
background: green;
}
div {
margin: auto; /* add */
}
Try setting the following on the flex item:
align-self: flex-start;