I have this html structure:
I want to make .SceneWithHistory-Container to have 100% of available height in parent. Here is my css:
.Module-Container
margin-top: 120px
display: flex
flex-direction: column
height: 300px
.Funnel-Container
display: grid
grid-template-columns: 1fr
grid-gap: 16px
.SceneWithHistory-Container
position: relative
display: grid
grid-template-columns: minmax(450px, 532px) 1fr
margin-left: -16px
width: calc(100% + 32px)
flex: 1
.Module-SubmitFormButtons
background: #fff
height: 64px
bottom: 0
width: calc(100% + 32px)
margin-left: -16px
padding: 0px 16px
border-top: 0
box-shadow: var(--whiteBoxShadow)
display: flex
align-items: center
margin-top: 0 !important
flex-shrink: 0
I'v tried to make SceneWithHistory-Container flex: 1, but i'ts not getting 100% of available height. If my container .Moudule-Container has 300px of height, i want to make .SceneWithHistory-Container 300px - height of Funnel-Container and - Module-SubmitFormButtons.
Please don't ask me to add height: calc() prop, because i want to have dynamic calculation in my parent, that's not depend of children
flex-grow makes an element inside a flexbox use all available space.
So
flex: 1
should work.
I tested your code and it seems to work: https://jsfiddle.net/w5uLf4s6/4/
Or isn't that what you want?
There is no difference between a greed element and any other block element in terms of setting height, and as long as it is a flex item and it's container has column direction and you've set flex: 1 so flex-grow is 1 and it should fill the remaining height as it is, and you can check it in the below snippet.
.Module-Container has a red border and .SceneWithHistory-Container has a green border.
.Module-Container {
margin-top: 120px;
display: flex;
flex-direction: column;
height: 300px;
border: 5px solid red;
}
.Funnel-Container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 16px;
border: 5px solid green;
}
.SceneWithHistory-Container {
position: relative;
display: grid;
grid-template-columns: minmax(450px, 532px) 1fr;
margin-left: -16px;
width: calc(100% + 32px);
flex: 1;
border: 5px solid blue;
}
.Module-SubmitFormButtons {
background: #fff;
height: 64px;
bottom: 0;
width: calc(100% + 32px);
margin-left: -16px;
padding: 0px 16px;
border-top: 0;
box-shadow: var(--whiteBoxShadow);
display: flex;
align-items: center;
margin-top: 0 !important;
flex-shrink: 0;
border: 5px solid pink;
}
<div class="Module-Container">
<div class="Funnel-Container">Funnel</div>
<div class="SceneWithHistory-Container">SceneWithHistory</div>
<div class="Module-SubmitFormButtons">Module-SubmitFormButtons</div>
</div>
Related
The image below is what I'm currently working with. I have a flex container taking up the whole width of the screen (a div with the red border), that contains two flex items: one being the white square, and the other being another flex container (with the blue border) containing the buttons.
What I'm trying to do is center the white square horizontally on screen, and have it so that when the window/screen is resized the button container div won't collide/come into the white square. I'm not sure how to go about this, so any help would be appreciated. My code is below the image.
<div class="middle-content-section">
<div class="drawing-pad-container"></div>
<div class="settings-container">
<button class="grid-toggle-button">Show grid</button>
<button class="grid-toggle-button">Hover to draw</button>
</div>
</div>
.middle-content-section {
margin-top: 50px;
display: flex;
gap: 50px;
width: 100%;
border: 1px solid red;
}
.settings-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20px;
border: 1px solid blue;
}
.drawing-pad-container {
height: 500px;
width: 500px;
background: rgb(255, 255, 255);
filter: drop-shadow(2px 2px 3px rgb(180, 180, 180));
transition: 0.3s;
display: grid;
grid-template-rows: repeat(30, 1fr);
grid-template-columns: repeat(30, 1fr);
flex: 0 0 auto;
}
If you are simply trying to centre the white square in the div all you really need are some margins.
margin: 0 auto;
So I modified my answer to hopefully better fit your request. It is a little hacky but does seem to work.
What I did was create one more container called items which holds both interior items. I then set an auto margin on the container to centre both the white box and then settings bar. The bar was given a fixed width of 100px and therefore I did a transform: translateX(100px) which will then shift everything over by 100px correcting for the width and therefore offset cause by the settings bar.
Below is a code snippet of the result with the change spaced out.
.middle-content-section {
margin-top: 50px;
display: flex;
width: 100%;
border: 1px solid red;
}
.items {
margin: 0 auto;
transform: translateX(100px);
gap: 50px;
display: flex;
}
.settings-container {
width: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20px;
border: 1px solid blue;
}
.drawing-pad-container {
height: 500px;
width: 500px;
background: rgb(255, 255, 255);
filter: drop-shadow(2px 2px 3px rgb(180, 180, 180));
transition: 0.3s;
display: grid;
grid-template-rows: repeat(30, 1fr);
grid-template-columns: repeat(30, 1fr);
flex: 0 0 auto;
}
<div class="middle-content-section">
<div class="items">
<div class="drawing-pad-container"></div>
<div class="settings-container">
<button class="grid-toggle-button">Show grid</button>
<button class="grid-toggle-button">Hover to draw</button>
</div>
</div>
</div>
ref: coryrylan.com
section {
width: 200px;
border: 1px solid #2d2d2d;
display: flex;
justify-content: center;
align-items: center;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
It's a small problem but I don't get it. I am just trying to align the text in y-axis, but it only goes a little distance down when I put align-self : end or center. Container is the main grid, which contains the col div (columns) which has the con div (content) which contains the text inside the box div
CSS
.container{
display: grid;
grid-template-columns: repeat(4,22.45em);
grid-template-rows: 48rem;
grid-template-areas:
"colone coltwo colthr colfour";
/*text-align: center;*/
}
.con{
/*
padding-left: 0.5rem auto;
padding-right: 0.5rem auto;
padding-top: 0.5rem auto;
padding-bottom: 0.5rem auto;*/
display: grid;
grid-area: con;
justify-content: center;
align-items: center;
padding-left: 0.5rem;
padding-right: 0.5rem;
position: relative;
}
.col{
border-right: 0.005rem solid white;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 16rem;
grid-template-areas: "con";
color: grey;
z-index: 1;
}
.box{
position: absolute;
padding-left: 0.5rem;
padding-right: 0.5rem;
justify-self: start;
align-self: end;
}
here is the codepen link : https://codepen.io/aronnora/project/editor/DkyrVM
You would probably need to put the content inside its own container and then give it some properties of its own
.center-Container {
display: flex;
justify-content: center;
align-items: center;
}
or a simpler way to just add a padding-top: 40%; to your existing content
Welcome to StackOverflow.
So I went through your CSS. I inspected the elements and found out that the child element with class .con have the default height and is also not inheriting the parent's height because you haven't set height to parent which is not necessary since you are using the grid-template-rows: 48em.
So I would suggest you to set height of .con
for eg.
.con {
height: 48em;
}
I hope this solves your query.
I have a CSS grid, and my problem is, that one of the container widths expand over 100%.
I understand it expands because of the content is larger, but I would like to stay 100%.
Why I need this: Because one field (witch course the problem) I would like to shrink with CSS calc. Problem is that the parent width percentage browser calculates before calc function in the child. This way, even though the field is small at the end when the content size of a parent is calculated is big.
.parent {
grid-area: info_panel;
z-index: 1000;
background-color: $color-card-background;
margin: 0.4rem;
margin-bottom: 1rem;
padding: 0.9rem;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
border-radius: 1rem;
}
child {
display: inline-flex;
justify-content: space-between;
width: 100%;
margin-bottom: 1rem;
}
sub-child { // this is the problem
display: inline-block;
max-width: calc(100% - 20rem);
}
EDIT
.index-page{
display: grid;
justify-content: stretch;
justify-items: stretch;
box-sizing: border-box;
overflow: hidden;
grid-template-columns: 12rem auto;
grid-template-rows: calc(100vh - 50px - 17rem) 17rem;
grid-template-areas: "left_panel right_panel "
"left_panel info_panel ";
}
.panel__left {
background-color: blue;
overflow: scroll;
grid-area: left_panel;
}
.panel__right {
background-color: red;
grid-area: right_panel;
grid-column: right_panel-start / right_panel-end;
grid-row: right_panel-start / info_panel-end;
}
.panel__info {
grid-area: info_panel;
z-index: 1000;
background-color: white;
margin: 0.4rem;
margin-bottom: 1rem;
padding: 0.9rem;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
border-radius: 1rem;
}
.panel__info__top {
display: inline-flex;
justify-content: space-between;
width: 100%;
margin-bottom: 1rem;
}
.panel__info__top__titles {
display: inline-block;
max-width: calc(100% - 17rem);
}
.panel__info__top__buttons {
display: inline-block;
padding-right: 1.4rem;
}
.row_info_text {
padding-left: 1.4rem;
padding-right: 0.7rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
line-height: 120%
}
.icon_button {
width: 3rem;
height: 3rem;
margin: 1rem;
vertical-align: top;
background-color: transparent;
border: none;
}
.icon_button span {
margin: auto;
text-align:center;
font-size: 2.2rem;
color: $color-theme-main;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<div class="index-page">
<div class="panel__left"></div>
<div class="panel__right"></div>
<div class="panel__info">
<div class="panel__info__top">
<div class="panel__info__top__titles">
<div class="row_info_text "><b>Small text</b></div>
<div class="row_info_text">Long text that ruin my layout, because is too long. Long text that ruin my layout, because is too long.Long text that ruin my layout, because is too long.Long text that ruin my layout, because is too long. It is tooooo long</div>
<div class="row_info_text">small text</div>
</div>
<div class="panel__info__top__buttons">
<button class="icon_button"><span class="material-icons">assignment_turned_in_outlined</span></button>
<button class="icon_button"><span class="material-icons">perm_phone_msg</span></button>
<button class="icon_button"><span class="material-icons">accessibility</span></button>
</div>
</div>
</div>
</div>
grid-template-columns: repeat(2, 12rem, 1fr);
that line should clear up your problem.
I want to achieve a multi-line flexbox container where element width can reduce if it's min-width is not reach to not let big whitespace when break line happen.
Here is an example on which i'm working on : https://codepen.io/BaptisteG/pen/dyyQodR
.container {
border: 5px solid rgb(111,41,97);
border-radius: .5em;
padding: 10px;
display: flex;
flex-wrap: wrap;
row-gap: 1em;
column-gap: 20px;
width: 500px;
}
.item {
padding: 10px;
background-color: rgba(111,41,97,.3);
border: 2px solid rgba(111,41,97,.5);
flex: 1 1 content;
min-width: 100px;
max-width: min-content;
white-space:nowrap;
overflow:hidden;
}
A sketch of what i want to achieve :
sketch
I don't want element size to be increase to complete whitespace
I'm working on this for hours but can not achieve a working solution. Basically, I want to combine a full-height column (left) with following rows (right) in a two-column-layout with CSS Flexbox.
The full-height column should match the height of the parent's div (.grid-main > main), which is a grid-layout on the other hand.
Screenshot of the issue:
So the yellow boxes should be next to the full-height column and not continue beneath it.
The column should match the height of .grid-main (which could be achieved with flex-direction: column, but all following divs are also listed in a column then).
HTML-Structure:
<div class="grid-main">
<header>...</header>
<nav>...</nav>
<main>
<div class="col-reports"></div>
<div class="classes"></div>
<div class="classes"></div>
<div class="classes"></div>
<div class="classes"></div>
...
</main>
<footer>...</footer>
</div>
CSS:
.grid-main {
display: grid;
height: 98vh;
width: 98vw;
overflow: hidden;
position: relative;
overflow: -moz-hidden-unscrollable;
grid-template-columns: 175px 1fr 1fr;
grid-template-rows: 0.1fr 1fr 0.05fr;
grid-template-areas:
"header header header"
"nav main main"
"footer footer footer";
animation: fadeIn 1s;
transition: 1s all ease-in-out;
}
.grid-main > main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
place-content: flex-start leftjustify-content: flex-start space-evenly;
grid-area: main;
position: relative;
overflow-y: auto;
background: var(--color-accent-main);
}
.col-reports {
flex: 1;
height: 100%;
position: relative;
max-width: 250px;
padding: 20px;
background: rgba(204,204,204,.7);
box-shadow: 1px 1px 25px inset rgb(179, 179, 179);
font-size: .8rem;
font-weight: bold;
line-height: 200%;
}
.classes {
font-family: 'Lora';
line-height: 2rem;
background: #f6efe0;
border-radius: 5px;
padding: 20px;
margin: 10px;
border: 5px solid #eee9dd;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.07);
animation: fadeInUp 1s;
}
Visualized the issue:
I solved the issue basically with the following code. So the hint from #Paulie_D was quite helpful, although I wanted to avoid Grid for this basic layouting.
.grid-reports {
display: grid; /* Grid in Grid */
height: 100%; /* In contrast to Flexbox, Grid can be used to assign height: 100% to a container.
It stretches to the parent container even if the viewport changes. Flexbox does not work with height actually.
Unless you use flex-direction: column; to the parent container. */
grid-template-rows: 1fr; /* optional */
grid-template-columns: 1fr 6fr;
grid-area: main; /* referes to Main in .grid-main */
}
.col-students {
grid-row: 1; /* .col-students must only be in the first row of .grid-reports to stretch */
grid-column: 1; /* Only the first column of .grid-reports */
max-width: 250px;
padding: 20px;
background: rgba(204,204,204,.7);
box-shadow: 1px 1px 25px inset rgb(179, 179, 179);
font-size: .8rem;
font-weight: bold;
line-height: 200%;
}
.col-reports {
grid-column: 2; /* All childs of .col-reports and itself are in the second column of .grid-reports
Note: grid-rows are automatically assigned, because they are not adressed any further */
display: flex; /* .col-reports becomes now a Flexbox to align its child items (box). */
flex-wrap: wrap; /* All child elements automatically break */
flex-direction: row; /* All child elements flow in a row */
align-self: flex-start; /* To align items next to each other and at start of Flex */
padding: 10px;
}
.col-reports .box { /* Further definitions of the element in .grid-main */
flex-basis: 45%; /* So the flex-basis in this case relates to the .col-reports
and not to the whole .grid-reports which makes sense and is desired behaviour.
45% means that 45% of .col-reports are used, which is in the second column. */
/*Note: This needs to be assigned as 100% in the mobile section, because elements
must be placed under each other for mobile devices. */
}