This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 1 year ago.
I have an element that can be any size. I need to set the child element to fill the remaining space. I wrote a little demo of my problem.
https://www.w3schools.com/code/tryit.asp?filename=GPOS93IXT6E7
.random-size{
height:200px;
width:100px;
padding:10px;
background-color:grey;
}
.container-fill{
background-color:red;
height:100%;
}
<div class="random-size">
<div class="container-fill">
hello world
</div>
</div>
Outputs:
This is correct for the output for now but if I add another child element
https://www.w3schools.com/code/tryit.asp?filename=GPOSB2B28A0I
<div class="random-size">
<div>uh oh</div>
<div class="container-fill">
hello world
</div>
</div>
The output is now:
As you see there is out of bounds content. I can't use overflow:hidden due to content will be displayed at the bottom. I tried using grids/tables but I could not figure it out. I don't want to resort to using calc.
If you can use display: flex, I'd like to recommend it.
.container{
width: 300px;
padding: 16px;
height: 400px;
background: gray;
display: flex;
flex-direction: column;
}
.box{
background: red;
flex-grow: 1;
}
<div class="container">
<p>some string</p>
<div class="box">
BOx
</div>
</div>
Related
This question already has answers here:
CSS fill remaining width
(8 answers)
How to make a div fill a remaining horizontal space?
(26 answers)
Fill the remaining height or width in a flex container
(2 answers)
Closed 2 years ago.
I am struggling with using flexbox to achieve that
This code is quite self explaining
<div id="inlineWrapper">
<div class="widthOfTheContent">Some label</div>
<div class="widthOfRemainingSpace"> <input class="width-100"/> </div>
</div>
I tried to play with flexbox but could not figure out how to make the first inline div to take the width of the content
#inlineWrapper {
display: flex;
}
.widthOfTheContent {
background: tomato;
}
.widthOfRemainingSpace {
flex: auto;
background: lemonchiffon;
}
.width-100 {
width: 100%;
}
<div id="inlineWrapper">
<div class="widthOfTheContent">Some label</div>
<div class="widthOfRemainingSpace"> <input class="width-100"/> </div>
</div>
You just need to set the widthOfRemainingSpace to flex: auto or flex:1
You just need flex:1 on the element you want to fill the space:
#inlineWrapper {
display: flex;
}
.widthOfRemainingSpace {
flex: 1;
}
.widthOfRemainingSpace input {
width:100%;
}
Codepen here.
This question already has answers here:
How to have child div of a flex, have its children full height [duplicate]
(1 answer)
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I have been stuck on this and frankly don't even know how to google it, all my google efforts were fruitless. My HTML is as below:
<div class="uk-flex uk-flex-column uk-height-1-1">
<!-- normal div with height 100vh and flexbox of flex column -->
<div>div that will have height fit contents</div>
<div class="uk-flex-1">
<!-- div that will fill the remaining space -->
<div class="uk-height-1-1">div that should fill the height of the parent</div>
</div>
<div>div that will have height fit content</div>
</div>
Now my main problem is having the grand child div (.uk-height-1-1) to have its height fill the parent, how do I make its height fill the height of the parent div??
NOTE: The below links of questions I have been through them before, they do not answer my question
Fill remaining vertical space with CSS using display:flex
Make a div fill the height of the remaining screen space
UPDATE: Am using uikit, I posted the question initially the way it is to simplify the question, uk-height-1-1 = height: 100%
Best way to tackle something like this is assign borders to things when you are trying to see how the layout is
.viewport-height {
display: flex;
border: 1px solid blue;
height: 500px;
}
.flex-1 {
border: 1px solid red;
}
.full-height {
border: 1px solid greenyellow;
height: 100%;
}
If you look in the css above the .full-height is now the same height as the flex-1
If I understood your question, then this should be what you are looking for. Let me know if you need any additional help.
.viewport-height {
height: 100vh;
display: flex;
flex-direction: column;
}
.flex-1 {
display: flex;
flex: 1;
background-color: green;
align-items: center;
}
.div-with-height {
height: 50px;
}
full-height {
height: 100%;
}
<div class="viewport-height flex-column">
<!-- normal div with height 100vh and flexbox of flex column -->
<div class="div-with-height">div that will have height fit contents</div>
<div class="flex-1">
<!-- div that will fill the remaining space -->
<div class="full-height">div that should fill the height of the parent</div>
</div>
<div class="div-with-height">div that will have height fit content</div>
</div>
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I've been trying to do the simple and mundane task of centering divs in CSS with no success.
Here's the code snippet:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#content {
}
.list-item {
position: relative;
display: inline-block;
border: solid thin #444;
}
.list-item .scene {
width: 200px;
height: 200px;
}
.list-item .description {
width: 200px;
margin-top: 0.5em;
}
.storyboard-row {
display: flex;
/* Method 1 */
/*justify-content: center;*/
/* Method 2 */
/*margin-left:auto;*/
/*margin-right:auto;*/
}
<div id="content">
<div class="storyboard-row">
<div class="list-item">
<div class="description">Scene 1</div>
<div class="scene"></div>
</div><div class="list-item">
<div class="description">Scene 2</div>
<div class="scene"></div>
</div><div class="list-item">
<div class="description">Scene 3</div>
<div class="scene"></div>
</div>
</div>
</div>
What I'm trying to center: The div with class="storyboard-row" in relation to the div with id="content"; and the div with id="content" in relation to its parent (the <body>).
What I tried: In the snippet you will find "Method 1" and "Method 2" which are my attempts at centering stuff around. The first method, using justify-content: center;, works but on downsizing the window, the leftmost squares will be pushed outside off the screen. The second method simply does nothing. Bootstrap can be used.
What I need to continue to happen: Currently the div with class="storyboard-row" has display: flex; which I used so that when downsizing the window, a scrollbar appears instead of pushing down a number of squares (which happens with block). In the snippet, only one row is shown, but the idea is to have multiple (each bellow the former).
EDIT: Thanks to #TemaniAfif the centering problem was fixed. However, because the div with id="content" now has display: flex, when rows are small enough in relation to the screen, they appear on the same line. An updated snipped can be found here: https://jsfiddle.net/hdnz34g8/
If I remove the display: flex from it, the rows appear as intended, line-wise, but they're no longer centered.
This question already has answers here:
How to set the margin or padding as percentage of height of parent container?
(8 answers)
Closed 5 years ago.
I have the following css in a page to always make my picture centered:
img {
padding: calc(49% - 306px);
}
The problem I have is that the "49%" is basing off the page width, and not height as I want. Is there a way I can change that? Thanks!
Note: My picture is in a <div align="center"> to center it horizontally
Without having full context of what you're trying to do, I'd guess CSS Flex is your best bet. The snippet I've attached shows you one method of centering an image inside a div when the image is not a full-sized background.
Keep in mind that this solution will need to be re-worked a little for your application.
.container {
border:1px solid red;
margin:0 auto;
display:flex;
height:500px;
width:500px;
justify-content:center;
align-items:center;
}
<div class="container">
<img src="https://www.w3schools.com/howto/img_fjords.jpg" width="100px" height="100px">
</div>
You could change the img element to a div and get the image as a background image like this:
div {
width:100%;
height:100%;
background:url(logo.png) center center no-repeat;
}
Can you use flexbox?
html, body, div.center {margin: 0;height: 100%;}
div.center {display:flex; align-items: center;}
img {
flex: 0 0 auto;
margin: auto;
}
<div class="center">
<img src="//placehold.it/306x100" alt="">
</div>
Demo: http://output.jsbin.com/xotupegove
This question already has answers here:
Make flex items take content width, not width of parent container
(3 answers)
Closed 5 years ago.
See attached snippet.
I need each item to take width space, with respect to content.
flex-items need to be stacked vertically, like in the example.
how to achieve it?
how to do that?
.container {
display:flex;
flex-direction:column;
}
.green {
background-color:green;
}
.red {
background-color:red;
}
<div class="container">
<div class="green"> hello world</div>
<div class="red"> hello world2</div>
</div>
Assuming they still should stack vertically, use display: inline-flex and they will size equally by the content of the widest item.
For each row to collapse to their individual content, use i.e. align-items: flex-start, and note, this will make them collapse when using display: flex too.
Why they stretch to equal width, is because align-items defaults to stretch, so by using any other value they will size by content
.container {
display: inline-flex;
flex-direction:column;
align-items: flex-start;
}
.green {
background-color:green;
}
.red {
background-color:red;
}
<div class="container">
<div class="green"> hello world</div>
<div class="red"> hello world2</div>
</div>