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.
Related
This question already has answers here:
How to make a div fill a remaining horizontal space?
(26 answers)
Closed 2 years ago.
I currently am trying to figure out how to accomplish this:
The green box would have contents that may be greater than the width, and so the div needs to scroll horizontally, if longer than space available.
The red box may or may not be present, and can have a variable number of elements. If I have to make it a fixed width box, I can, if necessary.
The overall width however for the grey box can't be more than 100%.
I would use flexbox css.
.outer{
width: 90%;
background-color: #C4C4C4;
height: 40px;
border: 10px solid #C4C4C4;
display: flex;
flex-flow: row no-wrap;
}
.left {
flex-grow: 1;
background-color: #9BB18C;
height: 40px;
overflow-x: scroll;
}
.right {
flex-shrink: 1;
background-color: #D6514B;
height: 40px;
margin-left: 10px;
}
<div class="outer">
<div class="left">
<div class="content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</div>
<div class="right">
YYYYYYY</div>
</div>
<br/><br/>
<div class="outer">
<div class="left">
<div class="content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</div>
<div class="right">YYY</div>
</div>
This question already has answers here:
How to make a div fill a remaining horizontal space?
(26 answers)
Fill the remaining height or width in a flex container
(2 answers)
Closed 2 years ago.
I have two divs that I want to put side by side in a container. The problem I am having is that the left div has a veriable size depending on the content and the right div should use all available space.
<style>
div.left {
display: inline-block;
outline-width: 0;
background-color: yellow;
padding-right: 5px;
}
div.right{
display: inline-block;
max-width: 100%;
outline-width: 0;
background-color: green;
}
.container{
background:black;
width:450px;
}
</style>
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
I tried with flex, table-cell, ... - almost everything. What am I missing?
display: flex would do the job if you also assign flex:1 to the .right div, so it will take all the remaining space:
div.left {
background: peachpuff;
padding: 10px;
}
div.right{
flex: 1;
background-color: yellowgreen;
padding: 10px;
}
.container{
background:black;
display: flex;
width:450px;
}
<div class="container">
<div class="left">
Variable content here
</div>
<div class="right">
remaining space
</div>
</div>
I'm actually having 2 divs that are superimposed in a parent container. The second div is absolute and is set to the bottom of the container. I want now to make the first div's height fill the remaining upper space left by the absolute one. I've looked it up but only found solutions to when the absolute div is at the top and not at the bottom. How should I do it ?
.container {
height: 100px;
position: relative;
background-color: red;
}
#row1 {
background-color: blue;
overflow: auto;
}
#row2 {
background-color: yellow;
position: absolute;
width: 100%;
bottom: 0;
}
<div class="container">
<div id="row1"> Row 1 content </div>
<div id="row2"> Row 2 content </div>
</div>
Here is my code snippet for more clarity: https://jsfiddle.net/ekm7y1nz/
EDIT: I'm afraid the row2 has to be absolute because I shouldn't have to scroll down to see it if the row1's content is too long for example. Only row1 should be scrollable if it's too long.
Personally I'd just go the flex route instead. Cheers
.container {
height: 100px;
display: flex;
flex-direction: column;
background-color: red;
}
#row1 {
background-color: blue;
flex: 1 0 auto;
}
#row2 {
background-color: yellow;
}
<div class="container">
<div id="row1"> Row 1 content </div>
<div id="row2"> Row 2 content </div>
</div>
if your problem is just scrolling you can change row1's css to this :
#row1 {
background-color: blue;
height: 100%;
width:100%;
overflow:auto;
}
the page will scroll when text gets bigger than it's div parent.
alse you can set row2's div height based on row1 with js or css frameworks like sass if your interested in using them.
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>
So I have a problem where I have 2 divs inside of another div with a fixed size. I the second of the two is too large to fit in the fixed height div so I want a scroll bara to appear. But the scrollbar goes outside of the content. How do I fix this?
html:
<div class="main">
<div class="first-child">
<div class="small-content">
Content
</div>
</div>
<div class="second-child">
<div class="large-content">
Content
</div>
</div>
</div>
css:
.main {
height: 250px;
overflow: hidden;
}
.first-child {
background-color: red;
}
.second-child {
max-height: 100%;
background-color: blue;
overflow-y: scroll;
}
.large-content {
padding-top: 300px;
}
.small-content {
padding: 10px;
}
https://codepen.io/RilleJ/pen/JeBVpz
I added an example as well to show what I mean. Basically I want to be able to scroll all the way down in the blue box and see the content without setting a fixed height. (Not that the content above, the red box, can be different sizes)
Use flexbox to divide the space of the container among the children.
Add flex-grow: 0, and flex-shrink: 0 for a child that just needs to take the space it needs for its content.
Add flex-grow: 1, and flex-shrink: 1 on the other children to divide the remaining space equally (each child will take at least the size of its content).
.main {
height: 250px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.first-child {
flex-grow: 0;
flex-shrink: 0;
background-color: red;
}
.second-child {
flex-grow: 1;
flex-shrink: 1;
background-color: blue;
overflow-y: scroll;
}
.large-content {
padding-top: 300px;
}
.small-content {
padding: 10px;
}
<div class="main">
<div class="first-child">
<div class="small-content">
Content
</div>
</div>
<div class="second-child">
<div class="large-content">
Content
</div>
</div>
</div>