I have recently started using the Grid layout in CSS and I am trying to make the elements in one of the grid areas fill the whole area. It works to set the width to 100% of the parent. But I have a really hard time getting the height of my div to be the same as the parent div. Here is some code to showcase my problem:
body {
width: 100vw;
height: 100vh
}
.grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: [sidebar-col-start] 15% [sidebar-col-end content-col-start] auto [content-col-end];
grid-template-rows: [sidebar-row-start content-row-start] auto [sidebar-row-end footer-row-start] 10% [footer-row-end];
}
.area {
grid-column: content-col-start / content-col-end;
grid-row: content-row-start / footer-row-start;
background-color: rgba(255, 0, 0, 0.4);
align-items: stretch;
}
.footer {
grid-column: sidebar-col-start / content-col-end;
grid-row: footer-row-start / footer-row-end;
background-color: rgba(0, 255, 0, 0.4);
}
.sidebar {
grid-column: sidebar-col-start / sidebar-col-end;
grid-row: sidebar-row-start / sidebar-row-end;
background-color: rgba(0, 0, 0, 0.4);
}
.red {
background-color: red;
height: 100%;
}
<div class="grid">
<div class="sidebar">
</div>
<div class="area">
<div class="red">
</div>
</div>
</div>
Link to Codepen: https://codepen.io/Martin36/pen/ayyoxv
My question is: How do I make a div fill the whole parent (which is a grid area)? Or more specifically, how do I make the height of the children match the parent's height?
Set .red with a min-height of 100vh.
body {
margin: 0;
width: 100vw;
height: 100vh
}
.grid {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: [sidebar-col-start] 15% [sidebar-col-end content-col-start] auto [content-col-end];
grid-template-rows: [sidebar-row-start content-row-start] auto [sidebar-row-end footer-row-start] 10% [footer-row-end];
}
.area {
grid-column: content-col-start / content-col-end;
grid-row: content-row-start / footer-row-start;
background-color: rgba(255, 0, 0, 0.4);
align-items: stretch;
}
.footer {
grid-column: sidebar-col-start / content-col-end;
grid-row: footer-row-start / footer-row-end;
background-color: rgba(0, 255, 0, 0.4);
}
.sidebar {
grid-column: sidebar-col-start / sidebar-col-end;
grid-row: sidebar-row-start / sidebar-row-end;
background-color: rgba(0, 0, 0, 0.4);
}
.red {
background-color: red;
height: 100vh;
}
<div class="grid">
<div class="sidebar">
</div>
<div class="area">
<div class="red">
</div>
</div>
</div>
Related
I am trying to create a grid using css. The first element has a fixed height which is causing the whole first row to have the same height. I want the elements in the second row to push up and fill the empty space in the first row. Is there anyway of achieving this with css grid?
The page I'm intending to using this for will have elements that will change in size depending on what the user submits.
I've tried using grid-auto-columns and grid-auto-rows along with grid-auto-flow: dense; but i can't get any combination of these to get the desired result. Any advice appreciated.
.container {
display: grid;
width: 800px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 1rem;
}
/* OTHER STYLES */
body {
background-color: #3b404e;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.item {
height: 100px;
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fff;
border-radius: 4px;
border: 6px solid #171717;
}
.item1 {
height: 250px;
}
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
</div>
Here is the codepen I am practicing on:
codepen
This is as simple as adding:
.primary {
grid-row: span 2;
}
Though obviously I chose to add a CSS class to the element you want to have focus, in order to do so:
.container {
display: grid;
width: 800px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 1rem;
}
/* OTHER STYLES */
body {
background-color: #3b404e;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.item {
height: 100px;
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fff;
border-radius: 4px;
border: 6px solid #171717;
}
.item1 {
height: 250px;
}
.primary {
/* this causes the .primary element(s) to expand across
two of the grid-row tracks: */
grid-row: span 2;
}
<div class="container">
<div class="item item1 primary"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
</div>
JS Fiddle demo.
The above could, of course, be achieved without adding a class-name and simply specifying an :nth-child() element:
/* or .container > div:first-child: */
.container > div:nth-child(1) {
grid-row: span 2;
}
.container {
display: grid;
width: 800px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 1rem;
}
/* OTHER STYLES */
body {
background-color: #3b404e;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.item {
height: 100px;
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fff;
border-radius: 4px;
border: 6px solid #171717;
}
.item1 {
height: 250px;
}
/* or .container > div:first-child: */
.container > div:nth-child(1) {
grid-row: span 2;
}
<div class="container">
<div class="item item1 primary"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
</div>
JS Fiddle demo.
References:
grid-row.
first thing you can't with only 2 rows. Grid gives a structure.
with 3 rows, it's possible
.container {
display: grid;
width: 800px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 1rem;
}
/* OTHER STYLES */
body {
background-color: #3b404e;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.item {
height: 100px;
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fff;
border-radius: 4px;
border: 6px solid #171717;
}
.item1 {
height: 250px;
grid-area: 1 / 1 / 3 / 2;
}
.item2 {
grid-area: 3 / 1 / 4 / 2;
}
.item3 {
grid-area: 1 / 2 / 2 / 3;
}
.item4 {
grid-area: 1 / 3 / 2 / 4;
}
.item5 {
height: 250px;
grid-area: 2 / 2 / 4 / 3;
}
.item6 {
height: 250px;
grid-area: 2 / 3 / 4 / 4;
}
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
<div class="item item6"></div>
</div>
This is one way to do it with grid-area position for each item
It's also possible to do same with span
Another manner to solve this issue...
.container {
display: grid;
width: 800px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 1rem;
}
/* OTHER STYLES */
body {
background-color: #3b404e;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
box-sizing:border-box;
}
.item {
height: 100px;
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fff;
border-radius: 4px;
border: 6px solid #171717;
}
.item1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
height: 250px;
}
.item4 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.item5 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
<div class="container">
<div class="item item1">item 1</div>
<div class="item item2">item 2</div>
<div class="item item3">item 3</div>
<div class="item item4">item 4</div>
<div class="item item5">item 5</div>
</div>
This question already has answers here:
Responsive grid of hexagons
(10 answers)
Closed 12 months ago.
I have multiple hexagons in a grid. I'm trying to have the grid items (hexagons) height and width responsive to the layout. Like as you can see in the jsfiddle they are overflowing from the grid container. Is there any way I could make the height and width fix relative to its container like whatever the layout is, they remain the same?
https://jsfiddle.net/gv5wc12x/3/
.home {
width: 100%;
height: 100vh;
background-color: rgb(123, 158, 158);
}
.hex-container {
max-width: 1000px;
margin: 0px auto;
margin-bottom: 100px;
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: 205px;
grid-gap: 2px;
filter: drop-shadow(0px 0px 8px rgba(247, 247, 247, 0.9));
}
.hexagon {
z-index: 0;
display: flex;
width: 250px;
height: 270px;
position: relative;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hexagon:first-child {
grid-row-start: 1;
grid-column: 2 / span 2;
background-color: #003366;
}
.hexagon:nth-child(2) {
grid-row-start: 1;
grid-column: 4 / span 2;
background-color: #87cefa;
}
.hexagon:nth-child(3) {
grid-row-start: 1;
grid-column: 6 / span 2;
background-color: #f5f5f5;
}
.hexagon:nth-child(4) {
grid-row-start: 2;
grid-column: 3 / span 2;
background-color: #f5f5f5;
}
.hexagon:nth-child(5) {
grid-row-start: 2;
grid-column: 5 / span 2;
background-color: #003366;
}
<div class="home">
<div class="hex-container">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
</div>
Please any help would be appreciated.
You were losing responsiveness because of fixed height and width values. Instead, I chose max and min height or widths to define the values. I also set aspect-ratio on the hex-container and the hexagons so they maintain the ideal dimensions you want.
Also, changed you rows to be grid-template-rows: repeat(2, auto); in order to give them resonsiveness.
In order to make that work, I added a top value on the second row hexagons of -25% (matching the point in the clip path) so they sit next to the top row of hexagons.
This will be responsive to widths and heights of all kinds.
.home {
width: 100%;
min-height: 100vh;
background-color: rgb(123, 158, 158);
}
.hex-container {
height: 100%;
max-height: 100vh;
max-width: 100%;
aspect-ratio: 6 / 2;
display: grid;
grid-template-columns: repeat(6, auto);
grid-template-rows: repeat(2, auto);
grid-gap: 2px;
filter: drop-shadow(0px 0px 8px rgba(247,247,247,0.9));
}
.hexagon {
z-index: 0;
max-width: 100%;
max-height: 100%;
aspect-ratio: 1 / 1;
background: #151515;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hexagon:first-child {
grid-row-start: 1;
grid-column: 1 / span 2;
background-color: #003366;
color: #fff;
filter: drop-shadow(0px 0px 8px rgba(247,247,247,0.9));
}
.hexagon:nth-child(2) {
grid-row-start: 1;
grid-column: 3 / span 2;
background-color: #87cefa;
color: #fff;
}
.hexagon:nth-child(3) {
grid-row-start: 1;
grid-column: 5 / span 2;
background-color: #f5f5f5;
color: #003366
}
.hexagon:nth-child(4) {
grid-row-start: 2;
grid-column: 2 / span 2;
background-color: #f5f5f5;
color: #003366;
position: relative;
top: -25%;
}
.hexagon:nth-child(5) {
grid-row-start: 2;
grid-column: 4 / span 2;
background-color: #003366;
color: #fff;
position: relative;
top: -25%;
}
<div class="home">
<div class="hex-container">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
</div>
I am working with grids. I have the header, banner, content and footer sections. My problem is that I need to adapt the banner height with its own content. I mean, if the text has one line, three or whatever the height of the banner should change accordingly.
The problem that I have currently is that when I have one paragraph with one line it is displayed fine but when I have more than one line the result is that the button is out of the banner container.
My code is as follows:
css
.grid {
display: grid;
grid-template-rows: 56px 80px auto 80px;
grid-template-areas:
"header"
"banner"
"content"
"footer";
grid-gap: 0;
width: 100%;
height: 100vh;
}
.grid-header {
grid-area: header;
z-index: 100;
}
.grid-banner {
grid-area: banner;
z-index: 50;
}
.grid-content {
grid-area: content;
display: grid;
height: 200px;
justify-content: center;
}
.grid-footer {
grid-area: footer;
}
html
.grid {
display: grid;
grid-template-rows: 56px 80px auto 80px;
grid-template-areas:
"header"
"banner"
"content"
"footer";
grid-gap: 0;
width: 100%;
height: 100vh;
}
.grid-header {
background-color: rgba(255, 255, 0, 0.3);
grid-area: header;
z-index: 100;
}
.grid-banner {
background-color: rgba(0, 255, 0, 0.3);
grid-area: banner;
max-height: 110px;
z-index: 50;
}
.grid-content {
background-color: white;
grid-area: content;
display: grid;
height: 200px;
justify-content: center;
}
.grid-footer {
background-color: rgba(255, 0, 255, 0.3);
grid-area: footer;
}
<div class="grid">
<div class="grid-header">
<div class="header-container">Header</div>
</div>
<div class="grid-banner">Banner</div>
<div class="grid-content">Content</div>
<div class="grid-footer">Footer</div>
Any idea?
There is a fixed height on grid-banner class. Try changing grid-template-rows: 56px 80px auto 80px to grid-template-rows: 56px auto 1fr 80px.
Like so -
.grid {
display: grid;
grid-template-rows: 56px auto 1fr 80px;
grid-template-areas:
"header"
"banner"
"content"
"footer";
grid-gap: 0;
width: 100%;
height: 100vh;
}
.grid-header {
background-color: rgba(255, 255, 0, 0.3);
grid-area: header;
z-index: 100;
}
.grid-banner {
background-color: rgba(0, 255, 0, 0.3);
grid-area: banner;
max-height: 110px;
z-index: 50;
}
.grid-content {
background-color: white;
grid-area: content;
display: grid;
height: 200px;
justify-content: center;
}
.grid-footer {
background-color: rgba(255, 0, 255, 0.3);
grid-area: footer;
}
<div class="grid">
<div class="grid-header">
<div class="header-container">Header</div>
</div>
<div class="grid-banner">
This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner This is looooong banner
</div>
<div class="grid-content">Content</div>
<div class="grid-footer">Footer</div>
You should delete the max-height on your .grid-banner and the height on your .grid-content. For the whitespace you want you could use padding-top/bottom. Because of the max-height and the height in your classes you already defined how big the height of your banner will be. By deleting them and adding padding to the content your banner will define the height equal to the number of characters you put in it.
.grid-banner {
background-color: rgba(0, 255, 0, 0.3);
grid-area: banner;
z-index: 50;
}
.grid-content {
background-color: white;
grid-area: content;
display: grid;
padding-top: 25px;
padding-bottom: 25px;
justify-content: center;
}
In my web app I am using css grid to build a basic home page. I want the top grid item: item-1 to be as tall as possible so that the whole grid fills the viewport. See image.
So that leaves no gap at the bottom. I have tried adjusting the height of the wrapper, the row height in grid-template-rows and changing the numbers in each individual item's grid-column value. How do I make item-1 cover more of the viewport and moves the 4 items below it down to touch the bottom?
.wrapper {
margin-top: -25px;
width:100vw;
height: 70vh;
// border: 2px solid #ccc;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(4, 90px);
grid-template-rows: repeat(4, 100px);
justify-content: center;
align-content: end;
padding-bottom: 10px;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
text-align: center;
}
.item-1 {
margin-top: 50px;
background-image: url(../assets/imgs/placeholder.png);
grid-column: 1 / 5;
grid-row: 1 / 5;
}
.item-2 {
grid-column: 1 / 3;
background-color: rgba(250, 250, 250, 0.1);
}
.item-3 {
grid-column: 3 / 5;
background-color: rgba(250, 250, 250, 0.4);
}
.item-4 {
grid-column: 1 / 3;
background-color: rgba(250, 250, 250, 0.4);
}
.item-5 {
grid-column: 3/ 5;
background-color: rgba(250, 250, 250, 0.4);
}
<div class="wrapper">
<div class="box item-1"></div>
<div tappable (click)="loadAbout()" class="box item-2"><i class="icon fa fa-info"></i>About</div>
<div tappable (click)="loadHowTo()" class="box item-3"><i class="icon fa fa-question"></i>How To</div>
<div tappable (click)="loadList()" class="box item-4"><i class="icon fa fa-signal"></i>List</div>
<div tappable (click)="loadContact()" class="box item-5"><i class="icon fa fa-comments"></i>Contact Us</div>
</div>
Set the wrapper grid-template-rows to auto 100px 100px.
html,
body {
font-family: Arial;
margin: 0;
padding: 0;
}
.grid {
width: 100vw;
height: 100vh;
background: #333;
display: grid;
grid-template-rows: auto 100px 100px;
grid-template-columns: repeat(4, 90px);
grid-gap: 5px;
justify-content: center;
}
.grid * {
color: white;
font-size: 120%;
background: rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.grid .grid-item-1 {
grid-column: 1 / 5;
grid-row: 1;
}
.grid .grid-item-2,
.grid .grid-item-3 {
grid-row: 2;
}
.grid .grid-item-4,
.grid .grid-item-5 {
grid-row: 3;
}
.grid .grid-item-2,
.grid .grid-item-4 {
grid-column: 1 / 3;
}
.grid .grid-item-3,
.grid .grid-item-5 {
grid-column: 3 / 5;
}
<div class="grid">
<div class="grid-item-1"></div>
<div class="grid-item-2">about</div>
<div class="grid-item-3">how to</div>
<div class="grid-item-4">list</div>
<div class="grid-item-5">contact us</div>
</div>
making width: 100vh; to your .wrapper and .item-1 divs might be what you're looking for. This should omit the need for negative margins, padding-bottom and align-content properties.
Hope that helps!
.wrapper {
/* margin-top: -25px; */
width: 100vw;
height: 100vh; /* made 100vh */
/* // border: 2px solid #ccc; */
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(4, 90px);
grid-template-rows: repeat(4, 100px);
justify-content: center;
/* align-content: end; */
/* padding-bottom: 10px; */
}
.box {
background-color: orange;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
text-align: center;
}
.item-1 {
/* margin-top: 50px; */
background-image: url(../assets/imgs/placeholder.png);
grid-column: 1 / 5;
grid-row: 1 / 5;
height: 100vh;
}
.item-2 {
grid-column: 1 / 3;
background-color: rgba(250, 250, 250, 0.1);
}
.item-3 {
grid-column: 3 / 5;
background-color: rgba(250, 250, 250, 0.4);
}
.item-4 {
grid-column: 1 / 3;
background-color: rgba(250, 250, 250, 0.4);
}
.item-5 {
grid-column: 3/ 5;
background-color: rgba(250, 250, 250, 0.4);
}
<div class="wrapper">
<div class="box item-1"></div>
<div tappable (click)="loadAbout()" class="box item-2"><i class="icon fa fa-info"></i>About</div>
<div tappable (click)="loadHowTo()" class="box item-3"><i class="icon fa fa-question"></i>How To</div>
<div tappable (click)="loadFreq()" class="box item-4"><i class="icon fa fa-signal"></i>List</div>
<div tappable (click)="loadContact()" class="box item-5"><i class="icon fa fa-comments"></i>Contact Us</div>
</div>
I use a third-party component that occupies all the available space, i.e. width=100% and height=100%. I don't have control over it.
I'm trying to fit it in the following layout, but its height=100% doesn't work (I expect the third-party component to occupy all the green space).
Why? How would you fix that?
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 100px;
}
.header {
display: flex;
background-color: rgba(255, 0, 0, 0.5);
}
.content {
flex-grow: 1;
background-color: rgba(0, 255, 0, 0.5);
}
.third-party-component {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 255, 0.5);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="third-party-component">
Third party component
</div>
</div>
</div>
In general, for an element using percent on height to pick up its parent's height, the parent need a height other than auto or being positioned absolute, or the height will be computed as auto.
Based on those 2 options, and as you mentioned in a comment, your own header is dynamic in height, you are left with absolute positioning.
The problem with adding absolute to the content, it will be taken out of flow and stop behaving as a normal flowed flex item, the good news, one can add a wrapper set to absolute.
Stack snippet
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 100px;
}
.header {
display: flex;
background-color: rgba(255, 0, 0, 0.5);
}
.content {
position: relative; /* added */
flex-grow: 1;
background-color: rgba(0, 255, 0, 0.5);
}
.wrapper {
position: absolute; /* added */
left: 0; /* added */
top: 0; /* added */
right: 0; /* added */
bottom: 0; /* added */
}
.third-party-component {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 255, 0.5);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="wrapper">
<div class="third-party-component">
Third party component
</div>
</div>
</div>
</div>
Another option could be to update the Flexbox properties, to give the content a height, using flex: 1 1 100% and give header flex-shrink: 0; so it doesn't shrink (as content got 100%).
This might not work on Safari though, as I know it have had issues when the height property is not set, though can't test that now as I don't have access to Safari.
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 100px;
}
.header {
display: flex;
flex-shrink: 0;
background-color: rgba(255, 0, 0, 0.5);
}
.content {
flex: 1 1 100%;
background-color: rgba(0, 255, 0, 0.5);
}
.third-party-component {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 255, 0.5);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="third-party-component">
Third party component
</div>
</div>
</div>
Because .content haven't height (height = 0px) and .third-party-component have 100% of 0px. You can add propety height : calc (100% - <height of .header>) into .content
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 100px;
}
.header {
display: flex;
background-color: rgba(255, 0, 0, 0.5);
}
.content {
height: calc(100% - 18px);
flex-grow: 1;
background-color: rgba(0, 255, 0, 0.5);
}
.third-party-component {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 255, 0.5);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="third-party-component">
Third party component
</div>
</div>
</div>
You can simply use another flex container in the .content element:
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 100px;
}
.header {
display: flex;
background-color: rgba(255, 0, 0, 0.5);
}
.content {
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: rgba(0, 255, 0, 0.5);
}
.third-party-component {
flex-grow: 1;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 255, 0.5);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="third-party-component">
Third party component
</div>
</div>
</div>