This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 2 years ago.
I have a flex container with flex children inside of it. In every flex-child there are 2 divs on top of each other, first one is with unknown height. I want to make the second div's height to fill the whole remaining height. Everywhere I look I see flex solution, but I don't know how to implement it since parent of the 2 divs is flex-child itself.
The whole case is more complex, but I'll try to simplify code here:
<div class="flex-parent-row">
<div class="flex-child">
<div class="auto-height"></div>
<div class="i-want-this-one-to-fill-remaining-height"></div>
</div>
...more flex children...
</div>
And putting ".auto-height" div inside ".i-want-this-one-to-fill-remaining-height" is not an option at this moment.
Please help :) Thank you!
EDIT: I've made a full Fiddle: https://jsfiddle.net/vanden1976/dLg20x4s/26
EDIT-2: Solved! Thank you for your suggestions! Here's the fiddle with the solution: https://jsfiddle.net/vanden1976/dLg20x4s/29
It would be more helpful when you would of provided your existing CSS to better understand what you are trying to do. However I hope the example below will help you figure out how to solve what you are trying to accomplish.
Html:
<div class="flex-parent-row">
<div class="flex-child">
<div class="auto-height"> auto div</div>
<div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
</div>
</div>
CSS:
.flex-parent-row {
display: flex;
flex-direction: column;
height: 200px;
width: 500px;
border: 1px solid #000;
}
.flex-child {
border: 1px solid #000;
background-color: red;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.auto-height {
background: orange;
}
.i-want-this-one-to-fill-remaining-height {
flex-grow: 1;
background-color: lightblue;
}
If you need additional help please provide more code.
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 7 months ago.
I have 3 divs:
<div>
<div id="div1">Title</div>
<div id="div2">Some text</div>
<div id="div3">Footer</div>
</div>
Every div have a width: 100%.
The title div height depends on its content so it can evoluate a little bit, and it has a fixed position.
The Footer div has a fixed size (its content cannot change) and a fixed position.
The goal is to have the text div between this two divs, having its size exactly matches the remaining places between title and text div so I can apply a scroll on it.
Can somebody explain to me how to do that ?
Thanks
I assume you want something like this:
#div1 {
background: rgba(0,0,250,0.2)
}
#div2 {
flex-grow: 1;
background: rgba(0,250,0,0.2);
overflow: scroll;
}
#div3 {
height: 10vh;
background: rgba(250,0,0,0.2);
}
.container {
height: 100vh;
flex-direction: column;
display: flex;
}
<div class="container">
<div id="div1">Title</div>
<div id="div2">Some text</div>
<div id="div3">Footer</div>
</div>
Judging by the clarification in your comment what you're trying to achieve is a basic layout which should be done using the <header> and <footer> tags rather than reinventing the wheel with divs.
However if you're set on using divs you should use position: absolute; or position: fixed; on the #div1 and #div3 depending on what you need the to do. Using this method you should add apropriate margins to make sure div1 and 3 dont cover div2.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 1 year ago.
[Duplicate]
answer here Image inside div has extra space below the image
I display some images with different sizes along multiple rows.
Example here
But there are gaps between the rows. I've tried a lot, but couldn't find why.
<div class="muralBox">
<div class="wrapper">
<div v-for="(topAlbum, i) in topAlbumInfo.value" :key="topAlbum.name" class="albums">
<Album :info="topAlbum" :width="layoutConfig[i].width"/>
</div>
</div>
</div>
And in Album.vue
<img :src="img" :width="width" :height="width" alt=""/>
And css:
.muralBox {
margin: auto;
max-width: 400px;
min-width: 400px;
}
.wrapper {
background: #1f1c2c;
display: flex;
flex-wrap: wrap;
}
I'm not sure if this is exactly what you wanted since I can't see how you styled them, but I just gave images 100% height and width and that basically did it in a codepen.
CodePen link
.albums img{
height: 100%;
width: 100%;
}
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
Is it possible to contain/limit the height of an image in a column flexbox? In this fiddle, I would like to make the image be displayed in a reduced size in order to make the title underneath it be just inside the bottom of the flex parent.
Ideally, I would like to do this with a 100% CSS solution.
Here is the fiddle: https://jsfiddle.net/brandoncc/czLjoxdu/4/
The basic CSS code is:
div {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid green;
width: 400px;
height: 300px;
}
Just add a new class
img
{
height:50%;
}
Change the percentage as you like.
try this..
<div>
<img src="http://placehold.it/350x350" / class="img-fluid">
<p>Image title</p>
div {
border: 1px solid green;
width: 400px;
height: 300px;
position:relative
}
You may add the following to keep the image from overflowing and use the max space. You can change the percentage to smaller the image. Just tweak it an see what works best for you.
img {
height: 100%;
}
I have a little question about CSS : I would like to do some responsive stuff with divs.
To be more precise, I would like to have a big div containing little divs inside. Those divs may vary in number, but they should all have a fixed size (for example, let's say 250px). So I would like to know if there is a way to make a kind of flex solution, so that divs are always justified, and as soon as the screen is to small to show for example 6 little divs per line, it only shows 5 divs per line.
I am pretty sure, that is not very clear, so here are two draws :
This is the first situation, the div is large enought to have 4 subdivs per line
Then, this div can't display 4 subdivs per line : so it shows 3 subdivs
Flexbox is useful here. Here's a Codepen that does what you're looking for:
https://codepen.io/ksmessy/pen/rmRbdL
As you shrink the window, the items will wrap to the next line. I separated the 3 flex properties in .flexparent with a line break so you can see what is causing this behavior.
HTML:
<div class="flexparent">
<div class="flexchild"></div>
<div class="flexchild"></div>
<div class="flexchild"></div>
<div class="flexchild"></div>
<div class="flexchild"></div>
</div>
CSS:
.flexparent {
border: 3px solid black;
width: 550px;
max-width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.flexchild {
border: 1px solid red;
width: 100px;
height: 100px;
margin: 10px;
}
Here's a CSS puzzle for you all.
I'm using flexbox in my layout. I have a header with a few buttons on the left side, some text in the center, and another button on the right. Here's an ascii drawing:
[btn][btn2][btn3][ text ][btn4]
Unfortunately, this looks weird because the text isn't centered in the header. What I really want is this:
[btn][btn2][btn3][ text ][btn4]
Ideally, I'd like to continue using flexbox to achieve this because it makes most of the horizontal layout really easy, but I'm willing to fall back to floats and/or positioning if need be.
One problem with positioning the text element absolutely is that long text will under/overlap the buttons on the side. I currently use text-overflow: ellipsis and as a bonus, I would love to continue to if possible:
[btn][btn2][btn3][ long text causes elli... ][btn4]
I'm also okay with adding extra container elements if that helps. Perhaps there's a way to solve this by adding left buttons and right buttons in containers and then ensuring those containers are always the same width?
Edit: I think I took a step in the right direction with this CodePen. It properly centers the text. The only downside is that the h1 needs a fixed or percentage width, and if that width is wider than the space available, it seems to just overlap the neighboring elements.
You came very close to a working sample. I forked your CodePen with a solution that don't require widths of any kind. It's using the power of flex to position elements.
The H1 will always be in the middle, with a width of the same size as the surrounding left-btnsand right-btns, using flex: 1;
You can, of course, specify your H1 to a fixed width as you did, or make it for example flex: 2; to have it take up 50% space instead of 33%.
Here's the fork on CodePen. I've removed unnecessary code.
And the code:
HTML
<div class="wrapper">
<div class="left-btns">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>center me! center me! center me! test woah asdf veasdf veasdf veasdf veasdf ve</h1>
<div class="right-btns">
<div class="box"></div>
</div>
</div>
<h1>center me!</h1>
CSS
.wrapper {
background: green;
display: flex;
margin: 5px;
}
h1 {
flex: 1;
text-align: center;
margin: 5px;
background: yellow;
overflow: hidden;
text-overflow: ellipsis;
white-space: noWrap;
}
.box {
width: 50px;
height: 50px;
margin: 1px;
background: red;
}
.left-btns,
.right-btns {
margin: 5px;
display: flex;
flex: 1;
background: blue;
}
.right-btns {
justify-content: flex-end;
}