I want to place the items in the flexbox take the same width.
Within the flexbox I have a searchsvg, input field and div with some text. I want each of them to take equal width themselves based on the width of the flexbox. I don't want to provide the width of each item manually. I tried using justify-content: space-evenly. In doing so, the input field takes more width than rest of them.
How can I avoid it? Below is the code:
.wrapper {
display: flex;
flex-grow: 1;
}
.items_container {
position: relative;
width: 40px;
height: 40px;
top: 16px;
margin-left: 16px;
padding-left: 5px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
#media (min-width: 300px) {
.items_container.expanded {
width: 50%;
}
}
.items_container.expanded .search_input_field {
display: flex;
align-items: center;
}
<div class="wrapper">
<div class="items_container expanded">
<div class="search_input_field">
<div>
<Svgsearch/>
</div>
<input type="text" placeholder="input" />
</div>
<div>dropdown to be added</div>
</div>
.child elements should grow equally and not shrink
.parent {
display: flex;
}
.child {
flex: 1 0 0;
}
/* ignore */
.child {
padding: 5px;
height: 50px;
background: lightcoral;
margin: 2px;
text-align: center;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
I moved flex-grow: 1 from where you placed it, because it wasn't doing anything. This is a rule that affects flex children. Therefore, I moved it to affect all direct children of the flex parent, .wrapper.
.wrapper {
display: flex;
/* flex-grow: 1; <-- moved below */
& > * {
flex-grow: 1;
}
}
jsFiddle
Related
This question already has answers here:
How can I make my flexbox layout take 100% vertical space?
(4 answers)
Closed 2 years ago.
I have a page that I want to style in such a way that I have a nav bar, a fixed height div underneath it and a flexible div underneath that, the flexible div contains two elements arranged horizontally and the flexible div should take up the remaining width of the page.
I followed this tutorial however I am not achieving the effect they describe: https://css-tricks.com/boxes-fill-height-dont-squish/
I'd like the area-2 div to take up the remaining height of the page.
How can I achieve this?
Stackblitz: https://stackblitz.com/edit/js-bnrfcu?file=style.css
<div class="nav">
<h1>Nav</h1>
</div>
<div class="area1">
<h4>Area1</h4>
</div>
<div class="fill-height">
<div class="area-2">
<div class="area-2-a">
<p>Area-2a</p>
</div>
<div class="area-2-b">
<p1>Area-2b</p1>
</div>
</div>
</div>
.nav {
height: 5rem;
background-color: aqua;
}
.nav-spacer {
margin-top: 5rem;
}
.area1 {
height: 10rem;
background-color: brown;
}
.fill-height {
display: flex;
flex-direction: column;
}
.fill-height > div {
flex: 1;
}
.area-2 {
display: flex;
flex-direction: row;
width: 100%;
}
.area-2-a {
width: 20%;
background-color: #4f90ff;
}
.area-2-b {
width: 80%;
background-color: #2b41ff;
}
Make the fill-height div use all the available space min-height: 100%;, but hey, there is no space to fill, well, height: 100vh; takes care of that.
body {
height: 100vh;
}
.fill-height {
display: flex;
flex-direction: column;
min-height: 100%;
}
You can set body as a flex column container too:
body {
margin:0;
min-height: 100vh;
display: flex;
flex-flow: column;
}
.nav {
height: 5rem;
background-color: aqua;
}
.nav-spacer {
margin-top: 5rem;
}
.area1 {
height: 10rem;
background-color: brown;
}
.fill-height {
display: flex;
flex-direction: column;
flex: 1
}
.fill-height>div {
flex: 1;
}
.area-2 {
display: flex;
flex-direction: row;
}
.area-2-a {
width: 20%;
background-color: #4f90ff;
}
.area-2-b {
width: 80%;
background-color: #2b41ff;
}
<div class="nav">
<h1>Nav</h1>
</div>
<div class="area1">
<h4>Area1</h4>
</div>
<div class="fill-height">
<div class="area-2">
<div class="area-2-a">
<p>Area-2a</p>
</div>
<div class="area-2-b">
<p1>Area-2b</p1>
</div>
</div>
</div>
see probably a duplicate of your question : Fill remaining vertical space with CSS using display:flex How can I make my flexbox layout take 100% vertical space?
I got this code working on Chrome where the content of first flex-item needs to be aligned to the bottom and stretches if necessary:
body {
height:100vh;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
.flex-container {
padding: 0;
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.flex-item {
background: tomato;
padding: 10px;
border: 5px solid red;
flex: 0 1 auto;
}
.flex-stretch {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
flex: 1 1 auto;
}
<div class="flex-container">
<div class="flex-item flex-stretch">1</div>
<div class="flex-item">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
<div class="flex-item">3</div>
</div>
but on Safari it doesn't respect the content of the first flex-item and collapses if the viewport is smaller than the flex-container and scrolling is necessary.
Is there any work around this issue?
Thanks, this is my first question here :)
Here is the codePen: https://codepen.io/felphos/pen/GRZVKwY
Since you use flexbox you shouldn't define the height explicitly. I think that removing height: "100%" and also setting .flex-stretch{flex: 1 0 auto;} (0 flex-shrink) will get you what you want.
For some reason, a div whose parent has a display: flex property is having a height of 228px even though there's no content inside of it.
Image example
.sights-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex: 1;
background-color: #ffffff;
}
.sights-list div {
flex-basis: 48%;
flex-shrink: 0;
display: flex;
padding: 10px;
}
<div class='sights-list'>
<div>
</div>
<div>
</div>
</div>
you can use
{
min-height: 100%;
}
I´m building a sidebar using CSS flex and I need it to grow vertically to fill the whole screen vertical height. Here is a skeleton of what I´m doing.
JSFiddle here
.app {
display: flex;
flex-direction: row;
. align-items: flex-start;
height: 100%;
width: 100%;
}
.sidebar {
background-color: red;
height: 100%;
}
.content {
width: 100%;
display: flex;
flex-direction: column;
}
.content-header {
flex: 1;
background-color: grey;
}
.content-main {
flex: 1;
background-color: yellow;
}
<div class='app'>
<div class='sidebar'>
This is sidebar
</div>
<div class='content'>
<div class='content-header'>
Content Header
</div>
<div class='content-main'>
This is the main content
</div>
</div>
</div>
I think I got it pretty close by assigning the full viewport height to your container and then removing flex: 1 from .content children.
.app {
display: flex;
flex-direction: row;
. align-items: flex-start;
height: 100vh;
width: 100%;
}
.sidebar {
background-color: red;
}
.content {
width: 100%;
display: flex;
flex-direction: column;
}
.content-header {
background-color: grey;
}
.content-main {
background-color: yellow;
}
<div class='app'>
<div class='sidebar'>
This is sidebar
</div>
<div class='content'>
<div class='content-header'>
Content Header
</div>
<div class='content-main'>
This is the main content
</div>
</div>
</div>
body, html {
height: 100%;
}
And the fiddle
https://jsfiddle.net/gxkezny9/
One of the parent containers wasn't 100% height
The proper usage of Flexbox, is to make the app take full height by either use height: 100vh, or give html/body a height, html, body { height: 100% } so the app's height work as expected.
Second, as you use align-items: flex-start all items will initially align at the top, but by adding align-self: stretch to the sidebar, it will fill its parent's height.
Note, for flex row item you should not use height: 100%, you should use the align-* properties.
Note 2, the set flex: 1 on content-header and content-main doesn't have any affect, unless their parent content has a height higher than their summed height. i.e. if to change the app's align-items to stretch (and if, the align-self on sidebar can be removed)
Note 3, the flex: 1 won't work properly in IE, use flex-grow: 1 instead, or assign all values, where flex-basis should be auto, i.e. flex: 1 1 auto
Stack snippet
body {
margin: 0;
}
.app {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 100vh; /* changed */
width: 100%;
}
.sidebar {
background-color: red;
align-self: stretch; /* added */
}
.content {
width: 100%;
display: flex;
flex-direction: column;
}
.content-header {
flex: 1; /* for IE, "flex-grow: 1" or "flex: 1 1 auto"
*/
background-color: grey;
}
.content-main {
flex: 1; /* for IE, "flex-grow: 1" or "flex: 1 1 auto"
*/
background-color: yellow;
}
<div class='app'>
<div class='sidebar'>
This is sidebar
</div>
<div class='content'>
<div class='content-header'>
Content Header
</div>
<div class='content-main'>
This is the main content
</div>
</div>
</div>
I'm trying to create a simple header and I'm having problems with the logo image because it's taking more space than needed.
.wrapper {
display: flex;
flex-direction: row;
height: 50px;
}
.logo {
padding: 5px;
}
img {
height: 100%;
}
.content {
padding: 5px;
}
<div class="wrapper">
<div class="logo"><img src="http://placehold.it/350x150"/></div>
<div class="content">content</div>
</div>
As you can see, the "content" text isn't placed near the logo, because the logo wrapper has a width equal to the size of the image before it gets resized by CSS.
I noticed that if I set height: 100% to the .logo element the situation is a bit better, but doing so, the "content" text overlaps a bit the image.
How can I fix it?
Here are two ways to fix the problem:
Method #1 – Remove the extra wrapper. Make the image itself the flex item.
.wrapper {
display: flex;
flex-direction: row;
height: 50px;
}
img {
height: 100%;
}
.content {
padding: 5px;
}
<div class="wrapper">
<img src="http://placehold.it/350x150"/><!-- div wrapper removed -->
<div class="content">content</div>
</div>
Method #2 – Define a height for the image wrapper. (No changes to the HTML.)
.wrapper {
display: flex;
flex-direction: row;
height: 50px;
}
.logo {
height: 100%; /* new */
border: 1px dashed red;
}
img {
height: 100%;
}
.content {
padding: 5px;
margin-left: 5px;
border: 1px dashed red;
}
<div class="wrapper">
<div class="logo"><img src="http://placehold.it/350x150" /></div>
<div class="content">content</div>
</div>
You have to explicitly set image height in pixels. height: 100% will use the image original height, NOT its container height.
I added justify-content and align-items to the flex container so things get properly positioned.
.wrapper {
display: flex;
flex-direction: row;
height: 50px;
justify-content: flex-start;
align-items: flex-start;
}
.logo {
padding: 5px;
}
img {
max-height: 50px
}
.content {
padding: 5px;
}
<div class="wrapper">
<div class="logo"><img src="http://placehold.it/350x150"/></div>
<div class="content">content</div>
</div>