As seen in this fiddle, I have a div with overflow-x: hidden and overflow-y: visible, and it still displays a scrollbar. Removing the display: flex or height attributes from outer div, or overflow-x: hidden fixes the problem.
Here's the fiddle HTML:
<div class="outer">
<div class="inner">Text<br>More text<br>Even more text</div>
</div>
CSS:
div.outer {
display: flex;
height: 30px;
overflow: visible;
}
div.inner {
overflow-x: hidden;
overflow-y: visible;
border: 1px solid black;
}
The issue with overflow-x/y is that visible can't be mixed with another value, so in this case, visible will be treated as auto.
Related
I'm looking for a css-only solution to this problem. I have a parent and a child div. The parent has a minimum height. When the child div has a smaller height, I want it to be vertically centered in the parent. But when the child div expands past the parent's min-height, I want the parent to expand.
Illustrated in this image:
I can come close; position: relative on the child allows me to affect the parent height while still positioning the child, but I can't figure out how to determine the correct position (top: 50% plus transform: translateY won't work for me since the parent's height is not fixed).
This one has me stumped! Thanks in advance for any suggestions.
You can easily do this with flex:
.container {
min-height: 300px;
display: flex;
background: red;
justify-content: center; /* Center horizontally */
}
.container>div {
height: 200px;
width: 200px;
background: blue;
margin: auto; /* Center vertically */
}
<div class="container">
<div>some content</div>
</div>
With bigger content height:
.container {
min-height: 300px;
display: flex;
background: red;
justify-content: center;
}
.container>div {
height: 800px;
width: 200px;
background: blue;
margin: auto;
}
<div class="container">
<div>some content</div>
</div>
I have a horizontal scrollbar containing images:
<ion-view class="menu-content" view-title="Filter">
<ion-content overflow-scroll="true">
<div class="filter-examples">
<img class="filter-examples-img" ng-repeat="filter in filters" ng-src="{{filter.image}}" />
</div>
</ion-content>
</ion-view>
With the following css the scrolling is working really good:
.filter-examples {
overflow: auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.filter-examples-img {
margin: 0 auto;
padding: 2px 2px 2px 2px;
height: 150px;
}
The problem is it is sticked at the top. I want it to be at the bottom so i tried this:
.filter-examples {
position: absolute;
bottom: 0;
left: 0;
overflow: auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
Now it is sticked to the bottom of the page but the horizontal scrolling is not working anymore. How can i stick it to the bottom without disabeling the scrolling?
ADD
A CodePen
You can fix it by adding width 100% to your image container
.wide-as-needed {
...
width:100%;
}
Demo: http://codepen.io/anon/pen/EVYqwm
I have:
.container {
display:flex;
align-items:center
}
.content {
flex-grow:1
}
in order to align the .content div vertically with css only. The content changes dynamically and that's why I can't use position:absolute; margin-top:50%... styling. Because I never know the exact height of div on each content update.
But in a scenario where .container width changes but height remains, .content overflows .container top because it wraps the text within.
What I'm trying to do is never let .content exceed the top position less than 0. Even the most ideal situation will be preserving the padding-top value of .container and margin-top value of .content. Overflowing bottom will be OK, in fact it'll be my preference.
Any workarounds?
You can make .container height flexible: use min-height instead of height.
.container {
display: flex;
align-items:center;
min-height: 75px;
border: 3px solid blue;
}
.content {
height: 150px;
flex-grow: 1;
border: 3px solid red;
resize: vertical;
overflow: auto;
}
<div class="container">
<div class="content"></div>
</div>
Another possibility is using overflow: auto. However, instead of centering using align-items:center, use margin: auto 0.
.container {
display: flex;
height: 75px;
border: 3px solid blue;
overflow: auto;
resize: vertical;
}
.content {
height: 150px;
flex-grow: 1;
margin: auto 0;
border: 3px solid red;
}
<div class="container">
<div class="content"></div>
</div>
I have a div with
display:inline-block;
postion:relative;
inside a div with
display:block;
width:348px;
overflow:hidden;
When the contents of the inner div overflow, I want them to expand horizontally, not vertically. The contents of the inner div consists of thumbnails of photos
You just need to set white-space: nowrap on either of the divs (the property is inherited). (Source)
Sidenote: The inner div is not necessary for this to work.
Demo: JSFiddle
HTML
<div class="container">
<div>
<!-- Thumbnails -->
</div>
</div>
CSS
.container {
display: block;
width: 348px;
overflow: hidden;
white-space: nowrap;
}
.container div {
position: relative;
display: inline-block;
}
Ray Z!
Overflow does matters. So in order to write your css as just
overflow:"hidden"
you should use
overflow-x: hidden;
overflow-y: scroll;
Set the width and overflow-x as auto for the inner div
<div id = "outer">
<div id = "inner"></div>
</div>
#outer{
width: 400px;
height: 300px;
border: red thin dotted;
}
#inner{
margin: 15px;
height: 280px;
width: auto;
border: green thin solid;
overflow-x: auto;
}
Here is the fiddle http://jsfiddle.net/jgrgb/
I have the following css but the scroll bars are visible. how can I make them invisible (scrollable div without scrollbars)?
.myDiv
{
height:300px;
overflow: scroll;
}
.myDiv {
width: 200px;
height:300px;
overflow: scroll;
}
.wrapper {
width: 183px;
height: 283px;
overflow: hidden;
border: 1px solid black;
}
<div class="wrapper">
<div class="myDiv">
floating div content...
</div>
</div>
This might work - basically you're placing a smaller div around the one you want and hiding the scroll bars.