This question already has answers here:
Equal height rows in CSS Grid Layout
(2 answers)
Closed 1 year ago.
So I have div A and div B.
I need div A to scale to the exact same height as div B
The two divs sit alongside each other and I need the height of Div A to be the same as B
Here is what I have tried: CSS
.container {
display: flex;
flex-direction: column;
// div a and div b
> div {
flex: 1;
}
}
HTML
<div class="container">
<div class="a">text for a</div>
<div class="b">text for b</div>
</div>
There are multiple ways to do this
the height property exists on a div.
Then you can use relative/ absolute heights like
Relative (both inherit from parent)
height: 3rem
Absolute (fixed)
height: 3em
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:
How to match width of text to width of dynamically sized image/title?
(2 answers)
Closed 1 year ago.
I have a container with unknown width and two children.
I want the first child to determine the width of the container.
I want the second child to wrap inside the container.
How can I do this using e.g. flexbox?
<div class="container">
<div class="first">this determines the container width</div>
<div class="second"> if this is too long, it wraps around</div>
</div>
first you will have to add display: inline-block to your container because div by default have display: block which takes 100% width
next set .container width to max-content so it will take only as many space as it needs to fit whole content and with .first that by default have display: block this element will set width for .container
lastly set max-width: fit-content on your .second element so it will "fit" inside container.
.container {
display: inline-block;
background-color: red;
width: max-content;
}
.second {
max-width: fit-content;
}
<div class="container">
<div class="first">this determines the container width</div>
<div class="second">asd asd if this is too long, it wraps around asd asd</div>
</div>
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I'm trying to achieve the flex layout as per the image below. In my code examples, I've not been successful, yet so I can't provide any useful code snippets.
Box 1 would be fixed width and 100% height
Box 2 and 3 would be 50% height and 100% width
Box 4 would be fixed width and 100% height
It would be wrapped in a container DIV (not shown).
Is this correct usage for Flex, or should a grid be used for something like this? I've found an example that manages to get either box 1 or box 4 in position (such as here: Mozilla Flex Example, but not with both.
For layouts with such requirements CSS Grid is a much better choice than Flexbox.
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Here's a working codepen. You can modify the fixed columns width by changing the grid-template-columns definitions.
Yes, you can do this with flexbox - you will need a container div for box 2 and box 3. You can use something like this:
#layout {
display: flex;
resize: both;
overflow: scroll;
}
#box1, #box4 {
width: 100px;
}
#box2-3 {
flex-grow: 1;
display: flex;
flex-direction: column;
}
#box2, #box3 {
flex-grow: 1;
}
#box1, #box2, #box3, #box4 {
border: 1px solid red;
}
<div id="layout">
<div id="box1">Box 1</div>
<div id="box2-3">
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
<div id="box4">Box 4</div>
</div>
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Css height in percent not working [duplicate]
(8 answers)
Closed 5 years ago.
I am trying to use Flexbox to create a simple two column webpage that occupies the full width and height. The left column is a fixed width of 200px while the right column in takes up the remaining space.
So far I have:
:root {
overflow-x: hidden;
height: 100%;
}
body {
min-height: 100%
}
.flexbox {
height: 100%;
display: flex;
}
.left {
flex: 0 0 200px;
height: 100%
}
.right {
flex: 1
}
and:
<div class="flexbox">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
Width is working as expected with right occupying all the remaining space other than the 200px that left takes up. However, they are not full height?
This is not a duplicate as it uses Flexbox
Try using viewport height. This will make the divs the full height of the viewport.
.flexbox {
height: 100vh;
display: flex;
}
This question already has answers here:
What are the differences between flex-basis and width?
(6 answers)
Closed 4 years ago.
I have the following structure, and I'd like to understand why my row does not grow with its inner content.
.row {
border:solid red;
display: flex;
flex-direction: row;
}
.cell {
border: solid green;
flex: 0 0 400px;
}
<div class="row">
<div class="cell">
cell 1
</div>
<div class="cell">
cell 2
</div>
<div class="cell">
cell 3
</div>
</div>
JsFiddle
I don't want the cells to grow or shrink, they should always be 400px width. The parent should grow and overflow the window, and an horizontal scrollbar is expected.
In the above example, the red border should be around the green border. The green border has the expected dimensions, not the red one.
I don't want to set a static width to my row for maintainability reasons related to my usecase.
I'm open for non-flexbox solutions (see inline-block attempt), but would appreciate more a flexbox one (because I need align-items: center behavior on the row)
If you want your container to always match the width of it's children, you'll need to look into display: inline-flex.
display: flex behaves more like a container with a width of 100%
Here's a fiddle that should work:
http://jsfiddle.net/hnrs64fm/