I have a child div with a table inside it. I want this div to fill out vertically within the parent container.
I have tried different methods, positions, flex, margins, etc., but I cannot get it to stretch out vertically within the parent container.
Essentially I have the following:
<div class="container">
<div class="content">
<div class="GridViewContainer wrapper">
</div>
</div>
</div>
I want GridViewContainer wrapper to fill out the rest of content
I have set up a demo here: ( I set the table div to a fixed height of 400px for demo purposes)
DEMO - https://jsfiddle.net/7ashn3b5/
You're missing display:flex on the parent container.
Since you haven't made .content a flex container, flex-direction:column is being ignored, and flex items are ignoring flex properties.
Once you add display:flex to .content (and remove the height:400px), you can apply flex:1 to .GridViewContainer wrapper, which tells it to stretch the full available height of its parent.
Revised Fiddle
Related
I need to constrain content in a div that has zero or more of height, width, max-height, or max-width set. If the content is smaller than the container in either dimension, it must be centered in that dimension; if it's larger, it must be scrollable in that dimension and start scrolled to the top/left.
This renders as I expected, with the image and text scrolling around, and the top-left corner of the image showing initially:
<div style="background-color:red;max-width:10rem;max-height:10rem;overflow:auto">
<div>
<img src="https://picsum.photos/id/123/400/300.webp">
</div>
<div>test</div>
</div>
It looks like this:
This is the full image:
This doesn't render as I expected (note the addition of display:flex;flex-direction:column;justify-content:center):
<div style="background-color:red;max-width:10rem;max-height:10rem;overflow:auto;display:flex;flex-direction:column;justify-content:center">
<div>
<img src="https://picsum.photos/id/123/400/300.webp">
</div>
<div>test</div>
</div>
It looks like this:
If I remove justify-content, then initially the top-left of the image is displayed, as expected. However, the content is no longer centered vertically if it is smaller than the container.
My questions are:
Why is justify-content affecting the scrollability and placement of the content? Shouldn't it only affect the immediate children of the div it's set on?
How do I achieve the effect I need?
JSFiddle: https://jsfiddle.net/5m4hec27/
<div style="background-color:red;max-width:50rem;height:10rem;overflow:auto;display:flex;justify-content:center; align-items:center;">
<div>
<img src="https://picsum.photos/id/123/400/300.webp">
</div>
<div>test</div>
</div>
Please check the code snippet and try to run it. Try to play with the value of height and width.
If container width is more than the child elements, Child elements will be horizontally centered automatically because of the justify-content property.
If container width is less than the child width, then it will show a horizontal scrollbar because of the overflow property.
If container Height is more than the child element, Child elements will be vertically centered automatically because of the align-items property.
If container height is less than the child width, It will show a vertical scrollbar because of the overflow property.
Note : 1. justify-content is not affecting the scroll ability
2. How to achieve the effect - Please see the Fiddle attached.
Please note I will not accept any answers that prevent bootstrap from being usable
The scenario is as follows:
I have a parent element (div) with two child elements (also divs) nested inside. I would like the children to be able to fill the height of the parent regardless of the content that is in side the children. On top if this, if the parent element is not tall enough to contain the child content, I would like the parent element to stretch to the necessary height to display the content within the children.
A non-working example is located here: https://jsfiddle.net/uqh76pku/2/
<div class="row content">
<div class="col-xs-3 section">text content goes here</div>
<div class="col-xs-9 section">text content goes here</div>
</div>
Many of the answers I have found (listed below) provide information which simply does not work. I have tried the following list of answers.
How to stretch div height to fill parent div - CSS
CSS - Expand child DIV height to parent's height
Stretch Child DIV to Height of Parent (Without hardcoding height)
For ex:
<div class="parent">
<div class="child">
</div>
</div>
Here, normally if I give margin as 20%, it is 20% of parent's width. But I want child to have margin calculated based on its own width. Is it possible by any chance?
Edit:
The (Orange)Margin should be calculated based on width of (Green)Child. I.e. Wider the Green Box, more the Margin. (Or less in my case).
Basically Similar to margin:auto. But I don't want to use that, since we don't want to align it exactly in center.
As long as you nest the child div inside the parent div, the child div's attributes will be relative to the parent div's attributes.
Use an invisible div.
E.g. if you want to set a margin to the left of 20% of the child div, just set width of child to 84% and width of the div to 16%.
Also, use id, not class:
<div id="parent">
<div class="invisible"></div>
<div id="child">...</div>
</div>
and in style.css:
.invisible {
display:none;
}
Also, set display of the rest of the divs to inline-block to get them to align horizontally.
Set parent Div with position:relative and margin in % and provide child element with fix height and width in pixel and also, margin with pixel
or
second way, set parent div with position relative and provide child element with position absolute and set left right and width
I have a div with overflow: auto. Suppose I want to put an arbitrary number of div elements inside it such that there is no line wrapping (the additional elements spill into the hidden area and can be scrolled to).
If I knew how wide all those elements would add up to be, I could do this:
<div class="scrollable">
<div class="fixed-width-container">
<!-- elements float left or display inline-block -->
</div>
</div>
Can I get this effect without knowing the total width of the contained elements?
UPDATE #2
Check updated fiddle: http://jsfiddle.net/cyCY3/2/
UPDATE
Check fiddle: http://jsfiddle.net/cyCY3/
Specifying a fixed width and white-space: nowrap for the child elements should solve the issue.
I am trying to create a variable height div. It seems if the div's inside the variable height div are set to float:left The variable height div gets a height of 0. If I set the variable height div float:left the div grows with the content inside it but now the variable height div is sent to the left of the screen instead of the center. How do I keep the main div in the center but also have it grow with it's child div's?
<div id="VariableHeightDiv">
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="clear"></div>
</div>
and in your css
.clear{clear:both;}
You need to clear the floats, otherwise the browser is unable to understand and calculate correctly the height of the container div. That is why in the end we add an empty div with clear:both.
Adding overflow: auto; to your main div will keep it centered, and will also force it to wrap around the elements inside of it. Two great articles on the float property and the overflow property can be found here: http://css-tricks.com/all-about-floats/ / http://css-tricks.com/the-css-overflow-property/
I wouldn't recommend using the <div style="clear: both;"> technique, because it's unnecessary extra markup, and doesn't add anything to the presentation.
Floated divs are somewhat removed from the document's "flow". You can force a container div to completely surround its contents, even if they're floated, by using a clearing element afterwards:
<div>
<div style="float: left">blah blah</div>
<br style="clear: both" />
</div>
There's better methods detailed here.
For the main div, include these CSS rules:
margin: 0 auto;
overflow: auto;
Also make sure that you have a min-height and width property set for the main div.
Edit: I've included the overflow property as well.
add overflow:hidden or overflow:scroll or overflow:auto for the parent div.
More info http://www.quirksmode.org/css/clearing.html
example: http://jsfiddle.net/MbgH4/1