This question already has answers here:
Why is a flex item limited to parent size?
(1 answer)
Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
(3 answers)
Closed 4 years ago.
I want to have a panel (a div) center inside a container (a div with flex display).
When the panel is small in height (just change "height: 300px" in my example CSS), it works OK. When the panel is higher ("height: 3000px") than its container, I want to be able to scroll page the whole page (Note I have "overflow-y: auto" on the body).
The issue is the container does not wrap completely the inner div. If you scroll down you can see the red stops and green overflows:
html, body {
height: 100%;
margin: 0;
}
body {
overflow-y: auto;
}
.h100 {
height: 100%;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-item-stretch {
flex: 1 1;
}
.panel {
height: 3000px;
width: 300px;
background-color: green;
}
.justify-content-center {
justify-content: center;
}
.vscroll {
overflow-y: auto;
}
.m-auto {
margin: auto;
}
.container {
background-color: red;
padding:10px;
}
<div class="flex-col h100">
<div>
<span>LOGO</span>
</div>
<div class="container flex-col flex-item-stretch m-auto">
<div>Title</div>
<div class="panel flex-item-stretch m-auto"></div>
</div>
</div>
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 2 years ago.
I don't know if my css is bad, or if there is bug in codemirror, and if there is a workaround.
I have an element with a specified height. Inside I have 3 rows, 2 fixed size, and the middle one taking up the remaining space. In that space I want to put a codemirror editor but as soon as there are more lines than fit in the space it looks like it expands to 100% the height of the outer container rather 100% height of the row it's in.
Any idea how to get it to stick to the correct size?
const elem = document.querySelector('.editor');
const codeMirror = CodeMirror(elem, {
value: new Array(12).fill(0).map((_,i) => `line ${i + 1}`).join('\n'),
mode: "javascript",
theme: "base16-dark",
});
#import "https://unpkg.com/codemirror#5.58.1/lib/codemirror.css";
#import "https://unpkg.com/codemirror#5.58.1/theme/base16-dark.css";
.two-columns {
display: flex;
background: pink;
width: 100%;
}
.left, .right { width: 50%; }
.left { background: red; opacity: 0.6; }
.right { background: orange; }
.row1 { background: yellow; }
.row2 { background: purple; flex: 1 1 auto; }
.row3 { background: green; }
.three-rows {
display: flex;
flex-direction: column;
height: 150px;
}
.editor {
width: 100%;
height: 100%;
position: relative;
}
.CodeMirror {
height: 100%;
}
<script src="https://unpkg.com/codemirror#5.58.1/lib/codemirror.js"></script>
<script src="https://unpkg.com/codemirror#5.58.1/mode/javascript/javascript.js"></script>
<div class="two-columns">
<div class="left">
<div class="three-rows">
<div class="row1">row1</div>
<div class="row2">row2</div>
<div class="row3">row3</div>
</div>
</div>
<div class="right">
<div class="three-rows">
<div class="row1">row 1</div>
<div class="row2 editor"></div>
<div class="row3">row 3</div>
</div>
</div>
</div>
note: the left column is only there to show the correct size. If you delete some lines from the codemirror area you'll see it fill out to the correct size but it overshoots if there are more lines
I don't really want some hacked solution like
.row2 {
height: calc(100% - 2something);
}
What's in the other rows shouldn't matter, all that matters is the parent has a fixed height and one row is takes up the space the other rows don't
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
How wide is the default `<body>` margin?
(4 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 3 years ago.
Here is my html/css containers structure:
.page {
height: 100%;
width: 100%;
}
.rowcontainer {
padding: 30px;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.container {
padding: 30px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
<div class="pagecontainer">
<div class="container">
<h1>Line at Top</h1>
<div class="rowcontainer">
<div class="container">
THIS IS THE LEFT TEXT </div>
<div class="container">
THIS IT THE RIGHT TEXT THAT OVERFLOWS THE WIDTH AND SHOW THE HORIZONTAL SCROLLBAR, THAT IS NOT DESIRED
</div>
</div>
<h1>Line at Bottom</h1>
</div>
</div>
Because of the paddings, both vertical and horizontall scrollbars appears.
How can I avoid these scrollbars, forcing the inner div to fit in the available width and height?
Adjust the box sizing of your html like this:
* {
box-sizing: border-box;
}
.page {
height: 100%;
width: 100%;
}
.rowcontainer {
padding: 30px;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.container {
padding: 30px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
<div class="pagecontainer">
<div class="container">
<h1>Line at Top</h1>
<div class="rowcontainer">
<div class="container">
THIS IS THE LEFT TEXT </div>
<div class="container">
THIS IT THE RIGHT TEXT THAT OVERFLOWS THE WIDTH AND SHOW THE HORIZONTAL SCROLLBAR, THAT IS NOT DESIRED
</div>
</div>
<h1>Line at Bottom</h1>
</div>
</div>
add this to your css
* {
box-sizing: border-box;
}
by default if you have element with width - 100px, border 2px and padding 10px actual width of the element will be 124px, by adding border-box rule to your style you are telling css to fit paddings and borders in elements set width/height.
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 4 years ago.
Trying to have a container div display an horizontal scrollbar when its child is too long. Instead, the container div itself overflows its parent.
Here is my code:
.root {
background-color: blue;
padding: 5px;
display: flex;
}
.left {
background-color: yellow;
flex: 0 0 auto;
width: 60px;
}
.right {
background-color: green;
padding: 5px;
}
.container {
overflow-x: scroll;
}
.content {
background-color: red;
width: 900px;
height: 100px;
}
<div class="root">
<div class="left">
</div>
<div class="right">
<span>Hello World</span>
<div class="container">
<div class="content">
</div>
</div>
</div>
</div>
Ideally, the green div would not overflow it's parent (the blue div) nor have a scrollbar. The horizontal scrollbar should appear in the container class div.
Simply add overflow: hidden to .right:
.right {
background-color: green;
padding: 5px;
overflow: hidden
}
This will ensure that the red box doesn't overflow its parent and will allow scrolling within it.
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 4 years ago.
I have a flexbox layout with fixed header, fixed footer, fixed menu, and scrolling content.
Thanks to some articles and SO answers, I have managed to make the menu and content vertically-scrolling, as expected.
Now, I just can't find how to do the same to make the content horizontally scroll. The horizontal scrollbar always appears at the body level. I've tried forcing a width on each container but it doesn't work. I expected the overflow: auto on the .layout-content-content div to overflow both horizontally and vertically, but CSS is not to be tamed so easily, apparently.
Corresponding codepen: https://codepen.io/cosmo0/pen/vaZbGL
html,
body,
.layout-container {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
.layout-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.header,
.footer {
height: 50px;
flex: 0 0 auto;
}
.layout-body {
flex: 1 1 auto;
display: flex;
}
.layout-menu {
flex: 0 0 auto;
width: 300px;
overflow: auto;
}
.layout-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.layout-content-title {
flex: 0 0 auto;
height: 50px;
}
.layout-content-content {
flex: 1 1 auto;
overflow: auto;
}
/* this is to simulate some large data table */
.large {
width: 10000px;
border: 1px solid #ccc;
}
<div class="layout-container">
<div class="header">Header</div>
<div class="layout-body">
<div class="layout-menu">
<ul>
<li>Menu contents</li>
</ul>
</div>
<div class="layout-content">
<div class="layout-content-title">Page title</div>
<div class="layout-content-content">
<div class="large">This content is too large</div>
<p>Content content.</p>
</div>
</div>
</div>
<div class="footer">Footer </div>
</div>
Simply put
overflow: auto;
onto .layout-content
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 5 years ago.
There are several questions about how to make a child div the height of its parent.
I have this behaviour by default and would like to have the inverse: so that the child does not fill the height of its parent (cross-axis):
#root {
display: flex;
flex-direction: row;
height: 50px;
width: 200px;
background: blue;
}
.el {
background: red;
}
<div id="root">
<div class="el">hello</div>
<div class="el">world</div>
</div>
What should I do (to the parent? to the child?) so that the height of hello and world is tight with the text?
Use align-items with a value other than stretch
#root {
display: flex;
flex-direction: row;
height: 50px;
width: 200px;
background: blue;
align-items: flex-start;
}
.el {
background: red;
}
<div id="root">
<div class="el">hello</div>
<div class="el">world</div>
</div>