Use height:100% when parents div have only min-height.
.line {
background-color: gray;
width: 1px;
height: 100%;
margin-left: 10px;
margin-right: auto;
}
.main {
min-height:200px;
}
<div class="col-6">
<div class=line>
</div>
<div class="col-6 main">
set by min-width
</div>
Using height:100% doesn't work when parents doesn't have height.
In this case, heights of main div changed depending on the amount of contents.
Because it has only min-height;
So, height:100% of line class doesn't work.
Is there a way to solve??
Consider using flex to do this.
As I understand, you want your line to fill your parent div while main class takes up at least 200px?
.parent {
display: flex;
flex-direction: column;
height: 600px;
}
.fill {
background-color: grey;
flex: 1;
}
.line {
flex-grow: 0;
min-height: 200px;
background-color: red;
}
.content-with-more-than-200px-height {
height: 220px;
}
<div class="parent">
<div class="fill">
</div>
<div class="line">
<div class="content-with-more-than-200px-height">
contents
</div>
</div>
</div>
Related
This is sort of a two in problem.
I have a body with height: 100vh similar to how my example is in the jsFiddle (except in there I put 20vh.
I have a similar structure as this, where the innerRight container can be quite large compared to the rest of the content, and only that conatiner is to obtain it's own scroll bar. I sort of got this working in my main project, but the outer container (similar to how I displayed outer in the example) still expands past the the parents height container main. Be it 100vh, or 20vh it doesn't matter it doesn't stay within with display:flex.
.main {
height: 20vh;
}
.outer {
display: flex;
overflow: hidden;
}
.innerLeft {
height: 200px;
width: 50px;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: green;
}
.innerRight {
overflow: auto;
height: 500px;
background-color: red;
width: 100%;
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
Can you please check the below code? Hope it will work for you.
You have to set height:100vh; in .main and set width:calc(100% - 50px); to .innerRight.
Remove height from innerleft and innerright element.
Please refer to this link: https://jsfiddle.net/yudizsolutions/9Lsyzg64/1/
body {
margin: 0;
}
.main {
height: 100vh;
}
.outer {
display: flex;
height: calc(100vh - 19px);
overflow: hidden;
}
.innerLeft {
width: 50px;
background-color: green;
}
.innerRight {
overflow: auto;
background-color: red;
width: calc(100% - 50px);
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
You need to set height to outer class.
.main {
height: 20vh;
}
.outer {
display: flex;
height: 200px;
overflow:hidden;
}
.innerLeft {
width: 50px;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: green;
}
.innerRight {
overflow: auto;
height: 500px;
background-color: red;
width:100%;
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
I have a pen here where i have a flexbox container with two children: left and right. I want to keep the container width constrained by viewport width no matter the screen size so that the right div which has exceedingly high width be scrollable as part of the constraint. How do I achieve this?
https://codepen.io/marshall-lee/pen/OJboGjm
.container {
display: flex;
width: 100vw;
}
.right {
background-color: green;
width: 3000px;
overflow-x: auto;
}
<div class="container">
<div>left</div>
<div>
<div class="right">right</div>
</div>
</div>
You just need to add overflow: auto to the .right parent div.
.right is overflowing the parent. It's not overflowing itself.
.container > div:last-child {
overflow: auto;
}
.container {
display: flex;
}
.right {
background-color: green;
width: 3000px;
}
<div class="container">
<div>left</div>
<div>
<div class="right">right</div>
</div>
</div>
follow the below code :-
.container {
display: flex;
width: 100vw;
}
.left-container{
background-color:red;
flex:1;
}
.right-container{
flex:11;
overflow-x:auto;
}
.right {
background-color: green;
width: 3000px;
overflow-x: auto;
}
<div class="container">
<div class="left-container">left</div>
<div class="right-container"><div class="right">right</div></div>
</div>
it will work as you expected.
I can't get the flex: column working so that child elements don't exeed the parent. The left block is an image, it has to be 100% of containers height:
.container {
width: 500px;
height: 300px;
border: solid blue 1px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.tall {
height: 100%;
width: 300px;
background: yellow;
}
.row {
margin: 10px 0;
background: red;
min-height: 10px;
}
<div class="container">
<div class="tall"></div>
<div class="row">This is a text that should be multiline, with automatic width depending on the left block width.</div>
<div class="row"></div>
<div class="row"></div>
</div>
The right rows no matter what I try are always exceeding the container, their width is always container width, not the remaining space widht. How can I achieve it?
I would change the direction of your flex so it is row and remove the flex wrap, then I would wrap your rows in a div with flex-grow:1 and remove the height from tall:
.container {
width: 500px;
height: 300px;
border: solid blue 1px;
display: flex;
flex-direction: row;
}
.tall {
width: 300px;
background: yellow;
}
.row-holder {
flex-grow:1;
}
.row {
margin: 10px 0;
background: red;
min-height: 10px;
}
<div class="container">
<div class="tall"></div>
<div class="row-holder">
<div class="row">This is a text that should be multiline, with automatic width depending on the left block width.</div>
<div class="row"></div>
<div class="row"></div>
</div>
</div>
I have a flexbox wrapper which has two descendants. They both have dynamic height. The second block could be higher than the first one, and I would like to limit the height of the second block to the same as the height of the first one.
.wrapper {
border: 1px solid black;
display: flex;
width: 400px;
margin-bottom: 100px;
}
.left {
background-color: blue;
height: 100px;
width: 200px;
}
.right {
width: 200px;
}
.first {
height: 70px;
background-color: yellow;
}
.second {
height: 70px;
background-color: green;
}
/*desired result */
.fixed-height {
height: 100px;
}
.overflow-value {
overflow: auto;
}
<div class="wrapper">
<div class="left"></div>
<div class="right">
<div class="first"></div>
<div class="second"></div>
</div>
</div>
<div class="wrapper fixed-height">
<div class="left"></div>
<div class="right overflow-value">
<div class="first"></div>
<div class="second"></div>
</div>
</div>
In the provided example, there two wrappers: the first one is the current wrapper, where the wrapper has the height of the tallest child. And the second one is the desired result (I added height to the wrapper, but I couldn't do it in real application)
CodePen Example
If you insist on using flexbox then there is a way to force the container to just take the height of specific child into account - this can be done by forcing the contents of the second item out of layout context with position: absolute. Unfortunately, this requires adding another wrapper inside the .right element. In addition, having the items positioned absolutely inside the second item will mean that the width of the contents will not be propagated to the .right element, but since your example has an explicit width set, then it works in this case. The code with those modifications is below:
.wrapper {
border: 1px solid black;
display: flex;
width: 400px;
margin-bottom: 100px;
}
.left {
background-color: blue;
height: 100px;
width: 200px;
}
.right {
width: 200px;
position: relative;
overflow: auto;
}
.first {
height: 70px;
background-color: yellow;
}
.second {
height: 70px;
background-color: green;
}
.right-wrapper {
position: absolute;
width: 100%;
}
<div class="wrapper">
<div class="left"></div>
<div class="right">
<div class="right-wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
</div>
</div>
I have 2 divs inside a parent:
<div class="parent">
<div class="foo1"></div>
<div class="foo2"></div>
</div>
foo1 will have a dynamic height, so I can't use the style below:
height: calc(100% - foo1Height);
Now, what I want to do is make sure that the lower child foo2 never expands outside of the parent div, and to show the scrollbar if it gets too big. I would prefer CSS only solutions.
You can either use flexbox. no markup changes.
.parent {
display: flex;
flex-direction: column;
height: 100px;
}
.foo2 {
flex: 1; /*expand to fit*/
background: silver;
overflow: auto; /*scroll as needed*/
}
<div class="parent">
<div class="foo1">1</div>
<div class="foo2">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
</div>
Or use CSS table, additional markup is required.
.parent {
display: table;
width: 100%;
height: 100px;
}
.foo1, .foo2 {
display: table-row;
}
.cell {
display: table-cell;
position: relative;
}
.foo2 {
height: 100%; /*expand to fit*/
background: silver;
}
.scroll {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto; /*scroll as needed*/
}
<div class="parent">
<div class="foo1">
<div class="cell">1</div>
</div>
<div class="foo2">
<div class="cell">
<div class="scroll">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
</div>
</div>
</div>