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;
}
Related
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/
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.
enter image description here
Remove box space from vertical and horizontal scroll bar
What you want is not possible because scroll is a native ui. However it is obviously possible if you make your own scrollbar using JS.
This is the closest that I can get with CSS
.case-1 .wrapper{
width: 100px;
height: 100px;
overflow: auto;
}
.case-1 .wrapper .something{
width: 200px;
height: 200px;
background-color: hotpink;
}
.case-2 .wrapper{
width: 100px;
height: 100px;
overflow-y: auto;
}
.case-2 .wrapper-inner{
overflow-x: auto;
}
.case-2 .wrapper .wrapper-inner .something{
width: 200px;
height: 200px;
background-color: hotpink;
}
body{
display: flex;
margin: 0;
font-family: sans-serif;
}
.case{
margin: 20px;
}
<div class="case-1 case">
<h4>Normal</h4>
<div class="wrapper">
<div class="something"></div>
</div>
</div>
<div class="case-2 case">
<h4>Desired</h4>
<div class="wrapper">
<div class="wrapper-inner">
<div class="something"></div>
</div>
</div>
</div>
You can try the property overflow.
The overflow-x property controls whether the content of the block element is displayed horizontally and overflow-y vertically.
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 have an image with a height larger than that of it's container. The image is set to max-height: 100% and max-width: 100% but it continues to grow beyond it's containing element (in height - surprisingly not in width)
How do I prevent it from expanding beyond it's container while keeping it's aspect ratio?
An example is available at http://codepen.io/navarr/pen/zxZjjP, and the code at that example:
The HTML:
.row {
display: flex;
.col {
display: block;
border: 1px solid blue;
width: 50px;
height: 400px;
flex-grow: 1;
display: flex;
flex-direction: column;
text-align: center;
.link {
flex: 1 1 auto;
img {
max-height: 100%;
max-width: 100%;
}
}
h3 {
flex: 0 0 auto;
background: green;
}
}
}
<div class="row">
<div class="col">
<div class="link">
<img src="http://i.imgur.com/qG6NmU7.png" />
</div>
<h3>100 x 800 image</h3>
</div>
<div class="col">
<div class="link">
<img src="http://i.imgur.com/EjltysP.png" />
</div>
<h3>800 x 100 image</h3>
</div>
<div class="col">
<div class="link">
<img src="http://i.imgur.com/zJlunbp.jpg" />
</div>
<h3>800 x 100 image</h3>
</div>
<div class="col"></div>
</div>
The first box illustrates the problem: the image expanding beyond it's containing element.
The second and third box show this not being a problem as long as the image is wider than it is tall.
Add height: 100%; to the parent of the image :
.link {
flex: 1 1 auto;
height: 100%;
img {
max-height: 100%;
max-width: 100%;
}
}
demo
Set width and height to .link in css.
Check edited codepen http://codepen.io/anon/pen/azJGrK
CSS
.link {
flex: 1 1 auto;
width: 100%;
height: 80%;
img {
max-height: 100%;
max-width: 100%;
}
Replace the img tag with a div and set the image as the background image, and add this to the styling:
Background-size:contain;
This will allow the image to maintain its aspect ratio but fill the entire space of the div as much as possible.
You can also try background-size:cover; and see which one fits your needs better.
Remember, you need to include the height and width of the div when using background images.
Using the same mentality as found in the answer here, you can try setting this on the image parent:
height: 0;
min-height: 100%;
And on the img itself, set:
height: 100%;