Why is flex-basis being ignored?
In the next situation, why is the height <header>
reduced? As far as I can see, it <header>
should keep the height declared in flex-basis
, but <div class="content-wrapper">
should take up the remaining space. This works until it contains content that is higher than the space available to it. In this situation, it is <header>
partially destroyed.
main {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
}
header {
flex-basis: 50px;
background: red;
}
.content-wrapper {
background: blue;
flex: 2;
overflow-y: auto;
}
.content {
height: 1000px;
background: green;
}
<main>
<header></header>
<div class="content-wrapper">
<div class="content"></div>
</div>
</main>
If you run a full screen slice and change the height, the height of the title changes relative to the height of the screen. I expect it to stay fixed at 50px.
source to share
@Eric Martinez 'is correct. To keep items from shrinking, set the flex-shrink
value to 0.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
main {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
}
header {
height: 50px;
flex-shrink: 0;
background: red;
}
.content-wrapper {
background: blue;
flex: 2;
overflow-y: auto;
}
.content {
height: 1000px;
background: green;
}
<main>
<header></header>
<div class="content-wrapper">
<div class="content"></div>
</div>
</main>
source to share