Right now I have a sidebar that minimizes and expands along with the content beside it.
This is wrapped around a main wrapper component such that I can pass any content/component.
However, if the content is too long the sidebar height will not adjust. I have tried setting the height and min-height and it didn't do anything.
Things I have tried/have thought about:
Faux columns however I am not sure to implement it in my use-case.
Make the sidebar fixed however I am not sure how will the content (children of the main wrapper) will adjust if the sidebar is minimized/expanded.
Here is what is happening right now.
Here is the sandbox link: Sidebar Codesandbox
Make the sidebar fixed however I am not sure how will the content
(children of the main wrapper) will adjust if the sidebar is
minimized/expanded.
To achieve this you need to create a global state with useContext, to adjust two separate components. And then change the active class of the parent element .content-wrapper. This will be a trigger the .sidebar, .sidebar-btn and .content components. Make some css changes to the css file.
You can add height:max-content; for the text, and in the css declare a variable that is equal to the height, than in the sidebar height you can set height to the variable.
On the .content-wrapper class replace the height: 100vh; with min-height: 100vh
Add align-items: stretch;
From the .content class remove the height: 200vh;
This should make the sidebar grow its hight and match the height of the content.
The reason why your current styles are not working is you have fixed height for both the elements inside flex. For the content, the text is much more than 200vh height and is overflowing. Giving align-items: stretch; to the flex parent (in this case it is the content-wrapper) will increase the height of the children elements to either min-height of the flex parent or to the height of the child (content) with most height if the height of the child is greater than min-height of the parent. For your example, if the height: 200vh; is not removed from the content then this will be the child's height that is greatest and therefore the sidebar's height will stretch till 200vh and will not extend beyond 200vh.
Related
I want to make element scrollable if it's content is becoming too large to fit in parent's max-height. The problem is that it overflows parent instead of adding scrollbar.
I know that providing height or max-height in pixels to element would fix the issue but I cannot do that because the height of the element is not known.
Link to the code: https://codesandbox.io/s/scrollable-height-ewfbmo?file=/src/App.js
(I want purple section to be scrollable)
So to scroll the purple region:
Just add overflow: auto to the .body class (the parent of the purple region)
I forked your code-sandbox:
https://codesandbox.io/s/scrollable-height-forked-9hvrpy?file=/src/styles.css
I have two child elements inside a parent element:
<div id="registration">
<div id="left-panel"></div>
<div id="right-panel"></div>
</div>
Styling:
#registration{
#include l {
flex-direction: column;
}
#left-panel, #right-panel{
width: 50%;
min-height: 100vh;
#include l {
width: 100%;
}
}
For simplicity, let's assume that there is no content in left-panel and there is content in right-panel (not shown)
I have made it responsive such that when the width is > l (i.e. 1025px), the two panels are side by side. When the width is < l, however, the panels will stack on top of each other.
I noticed that when they stack, the height of one, let's say left-panel, remains the same whereas the other one will increase to ensure that the contents don't 'spill out' of the element. Is this because I've set the height to min-height: 100vh? I ask because if I change 'min-height: 100vh' instead to 'height: 100vh', the content spills out.
So, it seems like min-height causes the parent element (i.e. right-panel) to change in height to contain all its contents. Can anyone confirm this?
Any help is appreciated!
There's nothing special about either flex or l in this regard.
min-height just sets the minimum height for the element - it's still allowed to expand in height of the content would exceed the height of the element, but never shrinks below the specified value:
The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.
Conversely, height is a fixed height where the element is not allowed to expand, and content will simply get cut off if there is more content than the element can accommodate:
The height CSS property specifies the height of an element. By default, the property defines the height of the content area.
If no height is specified, the default height: auto is used, which gives the element a flexible height based on the height of the content. The element will only be as high as is needed to accommodate the content, and will indefinitely expand to contain it.
I have a container div (modal) that is set to position: fixed (absolute is not an option for my purpose). Inside of this container I have two columns. One of these columns contains tab buttons with below them some content or a form. This content (only the content, not the tabs) should be scrollable but I can't figure out how.
The height of the tabs can change so the solution can't contain a fixed height for the tab bar.
I've tried to make the whole column scrollable first by setting the column to position: relative, min-height: 100% and overflow-y: scroll but this first try didn't even work.
Codepen with basic setup
EDIT
Not a duplicate of How to make child div scrollable when it exceeds parent height?
I'm working inside a fixed container
I'm working with flexible heights
Trying to achieve a css only solution
This issue is occurring because you are not declaring "max-height" to container ".details-column".
Try below CSS :
.content{
max-height: 400px;
overflow-y: auto;
}
Note: You have to set fixed height or fixed max-height of the container otherwise container won't know when it has to scroll data.
Excerpt from W3School:
The overflow property only works for block elements with a specified
height.
but since you've flexible height element doesn't know when to overflow as it will just keep on growing.
you'll most likely have to define a height or max-height or even use JS to calculate height, other suggestion i can make is to play around with white-space property as well as calc() for height.
Edit:
Here is a very good source to help you understand overflows: https://www.brunildo.org/test/Overflowxy2.html
Good Luck.
By applying following css your div will be scrollable.
.content{
height: 80%;
overflow-y: auto;
}
this is because there is not much content to make it scroll.. put some content and try.. check below link
overflow-y: auto
add this to the modal class. thanks
https://codepen.io/Xenio/pen/mvbpJV99
I have created this layout http://jsfiddle.net/6GVSu/ and the idea is to have centered container, which can have variable width, depending on its content. This is working just fine, but in this container I want to have header section which stays allways on top and the body container, which should fill the rest of the centered parent and show scrollbars if needed.
And now I am kind of stuck, I have tried to make this body container absolute positioned and stretch it within the parent, bud it will cancel its possibility to stretch the parent horizontaly.
And when I left it without positioning, it fills the rest of its parent as in fiddle, but it doesn't show the scrollbar eventually.
So please can someone give me some suggestion?
Thanks
You didn't set a height on the "body" class
.body
{
overflow:auto;
height: 300px;
}
Take off the height on the "innerPositionDiv" element
Updated Fiddle
You need to set the height of the <div class="body"></div> & set its `overflow-y: scroll'
Check this: http://jsfiddle.net/6GVSu/3/ updated
.body
{
height: 100%;
overflow-y:auto;
}
Pertaining to html, how do I make a div container grow with the content instead of manually defining a width and height.
<div id="container">
<div id="logo">
<img src="someimage.png"/>
</div>
</div>
No matter what the dimensions of logo are, container does not grow with it. :(
How would I fix this, or can it be fixed?
If you don't define width and/or height, the div element grows along with its content. Unless his content is set to absolute! If the content is set to float, you have to set to the container
overflow:hidden
in order to let it grow!
The default behaviour for divs is to fill the entire available width. A few ways to override this:
set display: inline-block (not IE-friendly)
float it (with the side effect of, well, floating it)
set display: inline (but that's almost never what you want)
set position: absolute
hard-code a width (no dynamic width though)
As a last resort, consider javascript.
Use the magical css property called "flex", it is really amazing
yourDiv{
display:flex;
}
Just make sure that the children are not position: absolute because this will not work with flex.
You can specify min-width and min-height and DIV will adjust width / height as the content changes (of course, not below min width/height).
Working code pen example
Most important css properties from the code (DIV is editable, so just type in text and it will grow with it by width / height):
min-height: 200px;
min-width: 100px;
If you used float it prevents <div> to grow up with content so you can use clear after float and it will work.
<div class="clear-fix"></div>
.clear-fix{
clear: both;
}