How do I set a div as scrollable (absolute) without fixed height filling entire view, while inside a flex-box?
(https://imgur.com/7v5OFas)
(typo at the right section, its fixed width, the only height expected is to be fullpage everything)
https://codepen.io/anon/pen/oJyOOp?editors=1000
(if I add height to the relative parent of the red section, it works, but I cant have a fixed height. Adding 100% from html to the relative parent also works, but I can't also do that.)
currently it goes:
<div style="display:flex">
<div style="flex-grow:1">
<div style="display:flex">
<div style="width:45px...">
....
</div>
<div ...header code>
....
</div>
<div style="flex-grow:1; top:70px; position: relative">
<div style="position: absolute; top:0; left:0; right:0; bottom: 0; overflow: auto>
</div>
</div>
</div>
</div>
<div style="width:45px...">
....
</div>
</div>
It ends up filling the header height.
I would drop the idea of absolute content if its not necesarry and try something similiar to:
html, body {
min-height: 100%;
height: 100%;
margin: 0;
}
.container{
background: blue;
display: flex;
height: 100%;
flex-flow: row;
}
.sidebar{
background: red;
height: 100%;
width: 200px;
}
.contentWrapper{
display: flex;
flex-flow: column;
flex: 1;
}
.header {
background: yellow;
height: 100px;
width: 100%;
}
.content {
flex: 1;
overflow: auto;
}
.scrollableContent {
height: 3000px;
}
<div class="container">
<div class="sidebar"></div>
<div class="contentWrapper">
<div class="header"></div>
<div class="content">
<div class="scrollableContent">
</div>
</div>
</div>
</div>
Where you basically make every container a flex and the non scalable part of its content will have fix width/height and the other part get flex: 1 which is shorthand for taking rest of the space.
Related
Consider:
.centered {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
display : flex;
flex-direction : column;
align-items : center;
}
.problem {
width: fit-content;
}
.scrollable {
width: fit-content;
overflow-y: auto;
margin: auto;
}
.content {
display: inline-block;
}
<div class="centered">
<div class="scrollable">
<div class="content">
<h1>Line1</h1>
<h1>Line2</h1>
<h1>Line3</h1>
<h1>Line4</h1>
<h1>Line5</h1>
<h1>Line6</h1>
<h1>Line7</h1>
</div>
</div>
</div>
The scrollable div gets a fixed height:
Why is the height fixed?
Next, let us add another div (problem):
<div class="centered">
<div class="problem">
<div class="scrollable">
<div class="content">
<h1>Line1</h1>
<h1>Line2</h1>
<h1>Line3</h1>
<h1>Line4</h1>
<h1>Line5</h1>
<h1>Line6</h1>
<h1>Line7</h1>
</div>
</div>
</div>
</div>
Now the height of scrollable is not fixed:
How did the addition of problem change the height of scrollable?
Here is the CodePen to play with.
Clarification. The actual solution is to move overflow-y: auto; margin: auto; up into .problem. However, the question is not to solve the problem, but to explain why the height is fixed in the first case (and how that height is calculated), but not fixed in the second case.
You do not need problem tag and class,so Remove them and just modify scrollable class to:
.scrollable {
width: 100%;
text-align:center;
overflow-y: auto;
margin: auto;
}
I'm trying to create a Flexbox setup comprised of two div elements which are both taking up 50% of the width of the screen equally.
The left side will have some text and the right side will have an image which will only fill the whole of it's 50% of the width, shrinking larger images down if necessary.
What's the best way to achieve this? I'm fairly new to Flexbox.
.content{
position: relative;
display: flex;
width: 100%;
height: 600px;
}
.content div{
flex-direction: column;
justify-content: center;
flex: 1;
}
.text{
background-color: pink;
}
.image{
background-color: paleturquoise;
}
<section class="content">
<div class="text">
<p>text goes here</p>
</div>
<div class="image">
<img src="https://i.imgur.com/rcZLIwH.jpg" alt="image">
</div>
</section>
You can make the .image position: relative and set the width of the image to 100%:
.content{
position: relative;
display: flex;
width: 100%;
height: 600px;
}
.content div{
flex-direction: column;
justify-content: center;
flex: 1;
}
.text{
background-color: pink;
}
.image{
background-color: paleturquoise;
/* make the parent position relative */
position: relative;
}
.image img {
/* make the width of the image equal to the parent width */
width: 100%;
}
<section class="content">
<div class="text">
<p>text goes here</p>
</div>
<div class="image">
<img src="https://i.imgur.com/rcZLIwH.jpg" alt="image">
</div>
</section>
I have a parent container that has a max width and I want there to be 3 boxes to a line. I am using flex for this but I want the boxes to take up the full width of the parent container which I am only able to achieve by hard-coding the width of the boxes. How can I have them adapt to the width of the sections container rather than me putting a 32% width on the boxes?
HTML
<div class="account-component>
<div class="cart-products-container">
<div class="sections">
<div class="cart-product">
</div>
<div class="cart-product">
</div>
<div class="cart-product">
</div>
<div class="cart-product">
</div>
<div class="cart-product">
</div>
<div class="cart-product">
</div>
</div>
</div>
</div>
CSS
.account-component {
max-width: 1240px;
text-align: center;
margin: 0 auto;
display: flex;
margin-top: 100px;
.sections {
display: flex;
flex-wrap: wrap;
.cart-product {
width: 32%;
margin-bottom: 25px;
height: 445px;
background-color: pink;
&:nth-child(3n+2) {
margin-right: 24px;
margin-left: 24px;
}
}
}
}
To get the desired effect, you just need to change:
.cart-product {
flex: 0 0 33%;
margin-bottom: 25px;
height: 445px;
background-color: pink;
}
You can not use percentage on child element if you did not set the width (not max-with) of the parent element, because you won't have a width to depend on.
In your case, use flex to set the percentage of the child elements.
Here's a sample fiddle: https://jsfiddle.net/gadawag/0by7dm81/6/
I'm trying to create this layout in css:
Several blogs (e.g. http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/) mentioned that the best way to do this is using the table layout. And it works actually, but the problem is i cant scroll the individual vertical panels, they always occupy their actual content. I tried to set a height explicitly for each but it's always ignored.
The CSS:
main {
width: 100%;
overflow: auto;
.cycle-progress{
display: table;
table-layout: fixed;
width: 100%;
}
.cycle-progress > div{
display: table-cell;
width: 600px;
height: 1000px;
h1{
background-color: #ffde17;
text-transform: uppercase;
}
}
.cycle-progress > div:nth-child(even){
background-color: white;
}
}
The HTML
<main>
<div class="cycle-progress">
<!--ng-init="timeline = $('.timeline').timeline()" -->
<div ng-repeat="pc in production_cycles" ng-controller="ProductionCycleCtrl" data-pcid="{{pc.id}}">
<h1 class="text-center m-t-none">{{pc.name}}</h1>
<div class="row">
<div class="col-lg-4 padder-lg">
<img src="/src/img/pc-init.svg" style="width: 200px" />
</div>
<div class="col-lg-8">
<div timeline class="timeline"></div>
</div>
</div>
<!--<div style="height: 1000px; background-color: red"></div>-->
</div>
</div>
</main>
A flexbox sized to occupy as much horizontal space as necessary should work:
body {
display: flex;
max-height: 100vw;
flex-direction: column;
}
.container {
display: flex;
width: fit-content;
}
.column {
max-height: 100%
overflow-y: auto;
}
For browsers that don't support flexboxes styling the columns as inline-blocks setting their parents to no-wrap might work too.
If you have a choice of setting explicit height(As I see in your post), then the solution is simple.
Wrap everything inside the table cell with a div and set height and overflow.
The HTML:
<div ng-repeat="pc in production_cycles" ng-controller="ProductionCycleCtrl" data-pcid="{{pc.id}}">
<div class="wrapper-element">
<h1 class="text-center m-t-none">{{pc.name}}</h1>
<div class="row">
<!--more content-->
</div>
</div>
</div>
The CSS:
.cycle-progress > div {
display: table-cell;
width: 600px;
> .wrapper-element {
height: 1000px;
overflow: auto;
}
}
I new to webdesign and I wonder how I could do something like this:
..........................
LEFT --- CENTER ---- RIGHT
..........................
Its one parent div in the center of the window, with 3 divs inside like columns. I want them to be dynamic, so they always scale to the browser window.
This is how it looks now.
My current HTML:
<div id="container_m">
<div id="left">
<p>My name is Barnabas</p>
</div>
<div id="right">
<p>Till salu</p>
</div>
<div id="center">
<p>Senaste nytt</p>
</div>
</div>
My currrent CSS:
#container_m
{
position:absolute;
height: 40%;
width: 60%;
left: 20%;
top: 45%;
background-color:rgba(0,0,0,0.2);
}
#left
{
position: relative;
height: 100%;
width: 33%;
float: left;
background-color: blue;
}
#right
{
position: relative;
height: 100%;
width: 33%;
float: right;
background-color: green;
}
#center
{
position: relative;
height: 100%;
width: 33%;
margin:0 auto;
background-color: yellow;
}
Floating divs can sometimes ruin the auto-resize of the parent div. What I do to ensure proper auto-resize of the parent div is to add this to parent div, just behind the last floating child:
<div style="clear: both;"></div>
This may be a dirty fix or whatever but it ensures the parent div always resizes along with its children.
whats wrong with that? I'm resizing my browser and they seem to be getting bigger and smaller. if you are talking about the fact they're not all inline then you need to do this:
<div id="parent">
<div id="left">
Left Content
</div>
<div id="center">
Center Content
</div>
<div id="right">
Right Content
</div>
</div>
And then float them all left. :)
You can simplify that hugely: http://www.jsfiddle.net/fsnuh/
HTML:
ids not needed on each child, as on your website, they are styled identically. classes attached below purely for the colored backgrounds
<div id="container_m">
<div class="red">
<p>My name is Barnabas</p>
</div>
<div class="yellow">
<p>Till salu</p>
</div>
<div class="green">
<p>Senaste nytt</p>
</div>
</div>
CSS
Styles for left, right and center combined into one. Overuse of position: relative removed.
#container_m
{
position: absolute;
height: 40%;
width: 60%;
left: 20%;
top: 45%;
background-color:rgba(0,0,0,0.2);
}
#container_m div
{
height: 100%;
width: 33.33%;
float: left;
}
.red
{
background-color: red;
}
.green
{
background-color: green;
}
.yellow
{
background-color: yellow;
}