I want to make P to be able to take more text than the height can contain, just so the text can be scrolled down to be read. DIV CLASS="others" has the right height I want. (500px)
The problem is, when I use the overflow: scroll function it goes all the way to the bottom of the page.
EDIT: Forgot to mention I want the titles "News" and "Products" to be without the scroll bar.
Thanks.
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: 0px;
padding: 40px 15% 20px 15%;
display: flex;
justify-content: center;
}
.others div {
width: 400px;
display: inline-block;
float: left;
margin: 0px 15px;
}
.others #news {
background-color: black;
color: white;
text-align: center;
}
.others #products {
background-color: black;
color: white;
text-align: center;
}
.others a {
color: white;
text-decoration: none !important;
}
.others #newsfeed, #productsfeed {
margin: 0px;
padding: 10px 0px;
background-color: lightgreen;
}
.others p {
margin: 0px;
padding: 10px 10px;
vertical-align: middle;
height: 800px;
overflow: scroll;
}
<DIV CLASS="others">
<DIV ID="news">
<H3 ID="newsfeed">News</H3>
<P>News will come here.</P>
</DIV>
<DIV ID="products">
<H3 ID="productsfeed">Products</H3>
<P>Cool photos here.</P>
</DIV>
</DIV>
As I mentioned in my comment, the issue is caused by specifying an explicit height to the inner paragraphs.
Besides, in order to make the inner paragraphs respect the height of their parents (#news and #products flex items which have the same height of their flex container, the .other) you could change the display type of the parents to flex as well and set their flex-direction to column.
And then give flex: 1; to the paragraphs as follows:
Example Here
#news, #products {
display: flex;
flex-direction: column;
}
#news p, #products p {
flex: 1;
overflow: auto; /* up to you */
}
As a side-note: make sure you have included the old (prefixed) syntax of flexbox as well for the sake of browser support. You could use tools like Auto Prefixer to achieve that.
You need a containing div on the paragraphs, then set overflow: scroll; and height: 460px; on that container (or whatever height you need to have it contained within the 500px tall .others block).
You'd also need to make sure your .others div styling doesn't apply to that container - in my example below, I changed that selector to .others > div to only select immediate children of .others. And you should remove the height: 800px; from the inner paragraphs, as mentioned by Hashem Qolami.
jsfiddle example
Related
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 4 years ago.
I must be forgetting something fundamental with my vertically and horizontally centered flexbox.
The container is within a parent with vertical scroll, and when the container becomes too tall, it grows beyond the parent top, clipping the content. The bottom stays put.
Try adjusting the height of the view or adding more lines to see it in action.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
overflow-y: auto;
align-items: center;
justify-content: center;
}
#box {
margin: 30px 0;
background: white;
border: 1px solid #dfdfdf;
}
<div id="wrapper">
<div id="box">
First line
<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
</div>
</div>
How do I keep it from getting clipped? Additionally I'm trying to have a 30px margin above and below the container.
Thanks!
You forgot nothing but you simply need to understand what is happening. First you made your wrapper to be 100% height of screen and then you made the box to be centred vertically and horizontally. When the box has a big height you will have something like this:
Now, when you add overflow-y: auto you will create a scroll that will start from the top of the wrapper until the bottom overflowed content. So it will be like this:
That's why you are able to scroll to the bottom to see the bottom part and not able to see the top part.
To avoid this, use margin:auto to center your element and in this case we will have two situations:
When box-height < wrapper-height we will have the space spread equally on each side because of the margin:auto thus your element will be centred like expected.
When box-height > wrapper-height we will have the normal behavior and your element will overflow and his top edge will stick to the top edge of the wrapper.
You may also notice the same can happen horizontally that's why I will use margin to center on both directions.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
padding:30px 0;
display: flex;
overflow-y: auto;
}
#box {
margin: auto;
background: white;
border: 1px solid #dfdfdf;
}
<div id="wrapper">
<div id="box">
First line
<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
</div>
</div>
I think what you want is to make your flex item (#box) have a height and set it's overflow, not the flex container. Also, to add your 30px above and below I would remove the margin from the box and instead add padding to the container.
So, updated styles would look like this:
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0; /*added*/
}
#box {
background: white;
border: 1px solid #dfdfdf;
overflow-y: auto; /*added*/
height: 100%; /*added*/
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0;
}
#box {
background: white;
border: 1px solid #dfdfdf;
overflow-y: auto;
height: 100%;
}
<div id="wrapper">
<div id="box">
First line
<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
</div>
</div>
I think you set the top margin in the box class which extends the height of the container. You can maybe set it to padding instead of margin. Hope this helps. Thanks.
I want to display some divs containing an image and two divs with text in it in a flexbox container with a fixed height.
These divs represent tracks with an album cover, the song name and the artists name.
Like this:
<div class="flex-container">
<div class="track">
<img class="track--image" src="http://lorempixel.com/400/400/">
<div class="track--artist-name">Artist</div>
<div class="track--track-name">Song</div>
</div>
<div class="track">
.
.
.
</div>
The CSS:
.flex-container {
display: flex;
width: 100%;
height: 100px;
background-color: lightblue;
}
.track {
border: 1px solid black;
text-align: center;
max-width: 9rem;
color: black;
}
.track--image {
width: 100%;
border-radius: 50%;
}
.track--name,
.track--artist-name {
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
The problem is that the image has a width of 100% to fit into its parent div. But this also implies that it overflows its parent. And also the two divs within the track div get pushed outside its parents.
How do I prevent the image from beeing too big for its parent div so that either the image and the two divs fit inside the parent?
I also prepared a codepen to better describe the problem: https://codepen.io/anon/pen/YBQGRb
EDIT:
My expectation looks something like this:
As you can see the light grey container is my flex-container within I want to have my track divs. The image and those two texts should fit within even if the height of the flex-container changes.
If you edit your image class like this it works.
.track {
border: 1px solid black;
text-align: center;
width: 9rem;
color: black;
.track--image {
border-radius: 50%;
height:100%;
}
}
https://codepen.io/anon/pen/XOadGO
Does switching height to auto in your .flex-container give you the desired outcome,
.flex-container {
display: flex;
width: 100%;
height: auto;
background-color: lightblue;
}
After comment
All I've done below is add a small amount of padding to the track container to get the image off the top border and forced the image to fit within the fluid-container by control the width.
.track .track--image {
width: 35%;
height: auto;
border-radius: 50%;
}
.track {
border: 1px solid black;
padding: 5px;
text-align: center;
max-width: 9rem;
color: black;
}
I fixed my problem now like this:
.track--image {
height: 66%;
border-radius: 50%;
}
This works not for every height of the flex-container but is okay in my case.
I searched over Stackoverflow though many posts but I didn't found the solution.
I'm trying to align my text vertically, using margin: auto;
It seems there is a margin collapsing problem, if you wanna check this example:
// HTML
<div class="outer">
<div class="inner">Hello</div>
</div>
<div class="outer2">
<div class="inner">Trying to center this text vertically</div>
</div>
// CSS
.inner {
margin: auto 0;
height: 20px;
color: white;
}
.outer {
background-color: red;
}
.outer2 {
background-color: blue;
height: 200px;
}
If you want to play on my code, click here
I don't believe there's a good way to vertically align content using margin: auto 0 like you've set it up. To get the inner divs vertically centered, here's a simple way by modifying .inner:
.inner {
height: 200px;
color: white;
line-height: 200px;
}
The display does the magic. Display: table-cell on inner and display: table on outer div. And finally on inner div you put vertical-align: middle or whatever position that you want.
.inner {
display: table-cell;
vertical-align: middle;
height: 20px;
color: white;
}
.outer2 {
text-align: center;
background-color: blue;
height: 200px;
display: table;
width: 100%;
}
I would advise you to use flexbox
add this to outer2 class
.outer2 {
background-color: blue;
height: 200px;
display:flex;
align-items:center;
}
And for horizontal align you can use justify-content:center
align-item:center will align items in center of div vertically ,
.outer2 {
display: flex;
justify-content: center, left;
background-color: blue;
height: 200px;
}
you are trying to align the entire inner div by giving margin:auto. You can use text-align: center if you want to align the text. If you need to align the entire div then mention height and width for inner div. I have posted fiddle link please check
http://jsfiddle.net/ajaycoder/n1rz0bts/4/
.inner {
margin: auto ;
color: white;
width:50%;
border: solid 1px red;
height:50%;
}
This question concerns a browser with full css3 support including flexbox.
I have a flex container with some items in it. They are all justified to flex-start but I want the last .end item to be justified to flex-end. Is there a good way to do this without modifying the HTML and without resorting to absolute positioning?
.container {
display: flex;
flex-direction: column;
outline: 1px solid green;
min-height: 400px;
width: 100px;
justify-content: flex-start;
}
p {
height: 50px;
background-color: blue;
margin: 5px;
}
<div class="container">
<p></p>
<p></p>
<p></p>
<p class="end"></p>
</div>
Flexible Box Layout Module - 8.1. Aligning with auto margins
Auto margins on flex items have an effect very similar to auto margins in block flow:
During calculations of flex bases and flexible lengths, auto margins are treated as 0.
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
Therefore you could use margin-top: auto to distribute the space between the other elements and the last element.
This will position the last element at the bottom.
p:last-of-type {
margin-top: auto;
}
.container {
display: flex;
flex-direction: column;
border: 1px solid #000;
min-height: 200px;
width: 100px;
}
p {
height: 30px;
background-color: blue;
margin: 5px;
}
p:last-of-type {
margin-top: auto;
}
<div class="container">
<p></p>
<p></p>
<p></p>
</div>
Likewise, you can also use margin-left: auto or margin-right: auto for the same alignment horizontally.
p:last-of-type {
margin-left: auto;
}
.container {
display: flex;
width: 100%;
border: 1px solid #000;
}
p {
height: 50px;
width: 50px;
background-color: blue;
margin: 5px;
}
p:last-of-type {
margin-left: auto;
}
<div class="container">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
This flexbox principle also works horizontally
During calculations of flex bases and flexible lengths, auto margins
are treated as 0. Prior to alignment via justify-content and
align-self, any positive free space is distributed to auto margins in
that dimension.
Setting an automatic left margin for the Last Item will do the work.
.last-item {
margin-left: auto;
}
Code Example:
.container {
display: flex;
width: 400px;
outline: 1px solid black;
}
p {
height: 50px;
width: 50px;
margin: 5px;
background-color: blue;
}
.last-item {
margin-left: auto;
}
<div class="container">
<p></p>
<p></p>
<p></p>
<p class="last-item"></p>
</div>
Codepen Snippet
This can be very useful for Desktop Footers.
As Envato did here with the company logo.
Codepen Snippet
I have a content area that should behave in the following way:
Content is centered vertically if there's no vertical overflow (currently achieved via display:table/-cell)
No scrollbar is displayed unless there is vertical overflow
the height of the containing div never changes
I've only been able to satisfy the first point - fiddle:
http://jsfiddle.net/PTSkR/125/
Here's my html:
<div class="row-fluid card-box">
<div class="span4 side-study-box">
<div class="side-box-content">
<pre class="text-content-saved">TEST
TEST</pre>
</div>
</div>
</div>
Css:
.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
text-align: center;
height: 160px;
max-height: 160px;
display: table ;
margin: 0px ;
margin-left: -1px;
position: relative;
overflow-y: scroll ;
}
.side-study-box .side-box-content {
width: calc(100%);
height: 160px;
float: right;
display: table;
overflow-y: scroll ;
background-color: white;
}
/*#region CONTENT AREAS */
/*#region TEXT CONTENT */
.side-study-box .text-content-saved {
width: calc(100%+29px);
font-size: 24px;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 160px !important;
max-height: 160px ;
background-color: white;
padding: 0px ;
margin: 0px ;
border: 0px ;
overflow-y: scroll;
}
Unfortunately I can't use js as part of the solution... is this possible with only css?
You can use overflow:auto; to achieve the second point and set the following:
word-break: normal !important;
word-wrap: normal !important;
white-space: pre !important;
fiddle: http://jsfiddle.net/PTSkR/134/
Keep in mind that since you are using a pre tag, it means that all the white spaces and line breaks formatting counts so any white space or extra line could cause the overflow and you might miss that. See here