I have div in which placed inner divs i need to make all inner divs in line and horizontal scrollbar should be displayed (i know it sounds crazy, but i need that). I tried container width auto and overflow scroll but nothing.
How to accomplish that?
my markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow</title>
<style>
body{
width: auto;
}
#items{
overflow-x: scroll;
width: auto;
}
.item{
display: inline-block;
width: 400px;
height: 100px;
border:1px solid;
}
</style>
</head>
<body>
<div id="items">
<div class="item">
Item content
</div>
<div class="item">
Item content
</div>
<div class="item">
Item content
</div>
<div class="item">
Item content
</div>
<div class="item">
Item content
</div>
<div class="item">
Item content
</div>
</div>
</body>
</html>
Use white-space: nowrap; on #items
#items{
overflow-x: scroll;
width: auto;
white-space: nowrap;
}
DEMO
simply give #items to height and overflow-x:auto.
#items{
overflow-x: auto;
width: auto;
height: 200px;
}
<div style="overflow-x:scroll;">
<div style="width:1600px;">
<div style="width:1500px;">
<table>
<tr>
<td> Your Value </td>
</tr>
</table>
</div>
</div>
</div>
I think you want something like this...
:root {
--gutter: 20px;
}
.app {
padding: var(--gutter) 0;
display: grid;
grid-gap: var(--gutter) 0;
grid-template-columns: var(--gutter) 1fr var(--gutter);
align-content: start;
}
.app > * {
grid-column: 2 / -2;
}
.app > .full {
grid-column: 1 / -1;
}
.hs {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: repeat(6, calc(50% - var(--gutter) * 2));
grid-template-rows: minmax(150px, 1fr);
overflow-x: scroll;
scroll-snap-type: x proximity;
padding-bottom: calc(.75 * var(--gutter));
margin-bottom: calc(-.25 * var(--gutter));
}
/* Demo styles */
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
background: #456173;
}
ul {
list-style: none;
padding: 0;
}
h1,
h2,
h3 {
margin: 0;
}
.app {
width: 375px;
height: 667px;
background: #DBD0BC;
overflow-y: scroll;
}
.hs > li,
.item {
scroll-snap-align: center;
padding: calc(var(--gutter) / 2 * 1.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fff;
border-radius: 8px;
}
<div class="app">
<h1>Some headline</h1>
<ul class="hs">
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
</ul>
<div class="container">
<div class="item">
<h3>Block for context</h3>
</div>
</div>
</div>
Related
I have a very simple grid layout of the menu, header, and content.
I would like the content (blue box) to stretch vertically. As you can see, the grid element (yellow box) already stretches vertically, but the blue element inside of it (which should be dynamic content) does not.
Is there a way to achieve this 1) without switching the whole grid structure to flexbox and 2) without using calc to give the blue content 100vh minus the header height?
.container {
height: 100vh;
display: grid;
grid-template-rows: min-content 1fr;
grid-template-columns: min-content 1fr;
grid-template-areas: "menu header" "menu content";
box-sizing: border-box;
overflow: hidden;
}
.mainMenuWrapper {
grid-area: menu;
height: auto;
}
.headerWrapper {
grid-area: header;
height: auto;
}
.contentWrapper {
grid-area: content;
overflow-y: auto;
height: auto;
background-color: yellow;
}
.menu {
height: 100vh;
background-color: red;
width: 50px;
}
.header {
height: 80px;
background-color: green;
}
.content {
background-color: blue;
width: 100%;
height: ???
}
<div class="container">
<div class="mainMenuWrapper">
<div class="menu">
menu
</div>
</div>
<div class="headerWrapper">
<div class="header">
header
</div>
</div>
<div class="contentWrapper">
<div class="content">
content
</div>
</div>
</div>
Image:
JSFiddle link: https://jsfiddle.net/the2sj1n/3/
You can apply height: 100% on that blue box .content
body {
margin: 0; /*Removed unexpected margins from browsers' default styles*/
}
.container {
height: 100vh;
display: grid;
grid-template-rows: min-content 1fr;
grid-template-columns: min-content 1fr;
grid-template-areas: "menu header" "menu content";
box-sizing: border-box;
overflow: hidden;
}
.mainMenuWrapper {
grid-area: menu;
height: auto;
}
.headerWrapper {
grid-area: header;
height: auto;
}
.contentWrapper {
grid-area: content;
overflow-y: auto;
height: auto;
background-color: yellow;
}
.menu {
height: 100vh;
background-color: red;
width: 50px;
}
.header {
height: 80px;
background-color: green;
}
.content {
background-color: blue;
width: 100%;
height: 100%; /*The change here*/
}
<div class="container">
<div class="mainMenuWrapper">
<div class="menu">
menu
</div>
</div>
<div class="headerWrapper">
<div class="header">
header
</div>
</div>
<div class="contentWrapper">
<div class="content">
content
</div>
</div>
</div>
I'm trying to make the div with the class side-panel-content scrollable when it's content is big, overflow-y: scroll; doesn't work in this case.
The idea here, is to make the full page take the viewport, which works when the .long-content div has no height, but if it has a long height this shouldn't make it's container to grow more, and should be scrollable instead.
Here is a full example:
html, body {
height: 100%;
}
.main {
height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
header, footer {
height: 80px;
background-color: yellow;
}
.content-wrapper {
height: 100%;
width: 100%;
display: grid;
grid-template-rows: auto 1fr;
}
.title {
padding: 24px;
width: 100%;
}
.main-content {
width: 100%;
display: grid;
gap: 24px;
grid-template-columns: 1fr 350px;
justify-content: space-around;
}
.main-panel {
display: grid;
grid-template-rows: auto 1fr;
border: 2px solid red;
}
.side-panel {
height: 100%;
width: 100%;
}
.side-panel-wrapper {
height: 100%;
background: #f8f9fa;
box-shadow: 0px 4px 10px rgb(0 0 0 / 10%);
display: grid;
grid-template-rows: auto 1fr;
}
.side-panel-header {
background-color: #ffffff;
padding: 24px;
border-bottom: 2px solid #e6e9f0;
}
.side-panel-content {
overflow-y: scroll;
}
.long-content {
height: 3000px;
}
<html>
<body>
<div class="main">
<header><h1>Header</h1></header>
<div class="content">
<div class="content-wrapper">
<div class="title">
<h1>Title</h1>
</div>
<div class="main-content">
<div class="main-panel">
<div>
<h2>
Main panel title
</h2>
<p>
Main panel content
</p>
</div>
</div>
<div class="side-panel">
<div class="side-panel-wrapper">
<div class="side-panel-header">
Side panel header
</div>
<div class="side-panel-content">
<div class="long-content">
long content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer><h1>Footer</h1></footer>
</div>
</body>
</html>
The solution for this is to use an absolute positioning for the child div that has a long height.
html, body {
height: 100%;
}
.main {
height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
header, footer {
height: 80px;
background-color: yellow;
}
.content-wrapper {
height: 100%;
width: 100%;
display: grid;
grid-template-rows: auto 1fr;
}
.title {
padding: 24px;
width: 100%;
}
.main-content {
width: 100%;
display: grid;
gap: 24px;
grid-template-columns: 1fr 350px;
justify-content: space-around;
}
.main-panel {
display: grid;
grid-template-rows: auto 1fr;
border: 2px solid red;
}
.side-panel {
height: 100%;
width: 100%;
}
.side-panel-wrapper {
height: 100%;
background: #f8f9fa;
box-shadow: 0px 4px 10px rgb(0 0 0 / 10%);
display: grid;
grid-template-rows: auto 1fr;
}
.side-panel-header {
background-color: #ffffff;
padding: 24px;
border-bottom: 2px solid #e6e9f0;
}
.side-panel-content {
overflow: auto;
position: relative;
height: 100%;
}
.long-content {
position: absolute;
top: 0;
height: 3000px;
}
<html>
<body>
<div class="main">
<header><h1>Header</h1></header>
<div class="content">
<div class="content-wrapper">
<div class="title">
<h1>Title</h1>
</div>
<div class="main-content">
<div class="main-panel">
<div>
<h2>
Main panel title
</h2>
<p>
Main panel content
</p>
</div>
</div>
<div class="side-panel">
<div class="side-panel-wrapper">
<div class="side-panel-header">
Side panel header
</div>
<div class="side-panel-content">
<div class="long-content">
long content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer><h1>Footer</h1></footer>
</div>
</body>
</html>
Styles
body{
margin:unset;
}
.carousel{
height: 200px;
width: 100%;
padding: 10px;
box-sizing: border-box;
display: grid;
grid-template-columns: 50px 1fr 50px;
grid-gap: 10px;
}
.carousel-controls{
color: navy;
}
.carousel > div{
display: grid;
align-items: center;
justify-content: center;
}
.carousel-holder{
background: purple;
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
overflow: hidden;
padding: 10px;
box-sizing: border-box;
}
.carousel-cards{
background: white;
height: 100%;
width: 125px;
display: grid;
place-items:center;
font-weight: bolder;
color: navy;
}
Markup with bit of php for card generation
<div class="carousel">
<div class="carousel-controls carousel-controls-prev ">
<i class="fas fa-arrow-left"></i>
</div>
<div class="carousel-holder">
<?php
$x = 1;
while ($x <= 250) {
echo "<div class='carousel-cards'>".$x."</div>";
$x++;
}
?>
</div>
<div class="carousel-controls carousel-controls-next ">
<i class="fas fa-arrow-right"></i>
</div>
</div>
The result
Problem
I am making a carousel to which Ill add javascript later. Now my problem is that the generated cards which should start from 1 are actually starting from 120 when I am using overflow hidden.
In regards to your content centering, in your css, it should be justify-content:start and not justify-content:center.
So, it should look like this:
.carousel > div{
display: grid;
align-items: center;
justify-content: start;
}
You can change your alignment to left if you want it to start at 1 rather than the center using:
.carousel-cards{
justify-content: left;
}
See it in action below:
body{
margin:unset;
}
.carousel{
height: 200px;
width: 100%;
padding: 10px;
box-sizing: border-box;
display: grid;
grid-template-columns: 50px 1fr 50px;
grid-gap: 10px;
}
.carousel-controls{
color: navy;
}
.carousel > div{
display: grid;
align-items: center;
justify-content: left;
}
.carousel-holder{
background: purple;
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
overflow: hidden;
padding: 10px;
box-sizing: border-box;
}
.carousel-cards{
background: white;
height: 100%;
width: 125px;
display: grid;
place-items:center;
font-weight: bolder;
color: navy;
}
<div class="carousel">
<div class="carousel-controls carousel-controls-prev ">
<i class="fas fa-arrow-left"></i>
</div>
<div class="carousel-holder">
<div class='carousel-cards'>1</div>
<div class='carousel-cards'>2</div>
<div class='carousel-cards'>3</div>
<div class='carousel-cards'>4</div>
<div class='carousel-cards'>5</div>
<div class='carousel-cards'>6</div>
<div class='carousel-cards'>7</div>
<div class='carousel-cards'>8</div>
<div class='carousel-cards'>9</div>
<div class='carousel-cards'>10</div>
<div class='carousel-cards'>11</div>
<div class='carousel-cards'>12</div>
<div class='carousel-cards'>13</div>
<div class='carousel-cards'>14</div>
<div class='carousel-cards'>15</div>
<div class='carousel-cards'>16</div>
<div class='carousel-cards'>17</div>
<div class='carousel-cards'>18</div>
<div class='carousel-cards'>19</div>
<div class='carousel-cards'>20</div>
<div class='carousel-cards'>21</div>
<div class='carousel-cards'>22</div>
<div class='carousel-cards'>23</div>
<div class='carousel-cards'>24</div>
<div class='carousel-cards'>25</div>
</div>
<div class="carousel-controls carousel-controls-next ">
<i class="fas fa-arrow-right"></i>
</div>
</div>
How to span a one of the grandchild element to 100% width in CSS Grid while the parent is container is divided into 3 fractions.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container > div {
background-color: #4834d4;
width: 100%;
}
.container > div .child_01 {
background-color: #f9ca24;
width: 80%;
height: 50px;
margin: 1rem auto;
}
.container > div .child_02 {
background-color: #eb4d4b;
width: 80%;
height: 50px;
margin: 1rem auto;
}
<div class="container">
<div>
<div class="child_01"></div>
<div class="child_02"></div>
</div>
<div>
<div class="child_01"></div>
<div class="child_02"></div>
</div>
<div>
<div class="child_01"></div>
<div class="child_02"></div>
</div>
</div>
What I am trying to achieve is this.desired layout
Is this possible to achieve in CSS Grid.
Here you go with a solution
.container {
padding: 20px;
display: flex;
flex-direction: column;
background-color: #4834d4;
}
.container > div {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 1rem;
}
.child_01 {
display: inline-flex;
background-color: #f9ca24;
width: 30%;
height: 50px;
}
.child_02 {
display: flex;
background-color: #eb4d4b;
width: 100%;
height: 50px;
margin: 1rem auto;
}
<div class="container">
<div>
<div class="child_01"></div>
<div class="child_01"></div>
<div class="child_01"></div>
</div>
<div class="child_02"></div>
<div class="child_02"></div>
<div class="child_02"></div>
</div>
I have use flex instead of grid.
Could you give me an explanation of what is going here? (If it's possible attach links to the CSS spec)
When I set flex-shrink to 0 on #grid-container (flex: 1 0 auto), there appears a scroll bar for the whole page
But when I set flex-shrink to 1 on #grid-container (flex: 1 1 auto), the bar scroll bar appears only for the #grid-container
In the code snippet below flex-shrink on #grid-container is set to to 0 (flex: 1 0 auto). Change it to 1(flex: 1 1 auto) to see the difference
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
}
#header {
background-color: brown;
flex: 0 0 100px;
}
#grid-container {
flex: 1 1 auto;
display: grid;
overflow: hidden;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
#grid-item {
grid-column: 1/2;
grid-row: 1/2;
overflow: auto;
}
#list {
overflow: auto;
}
#list-item {
font-size: 140px;
}
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<div id="header"></div>
<div id="grid-container">
<div id="grid-item">
<div id="list">
<div id="list-item">1</div>
<div id="list-item">2</div>
<div id="list-item">3</div>
<div id="list-item">4</div>
<div id="list-item">5</div>
<div id="list-item">6</div>
</div>
</div>
</div>
</body>
</html>
By setting flex-shrink:1 (the default value) you allow your element to shrink inside its flex container and since you set the body (the flex container) to be height:100% it will shrink to fit inside it creating the scroll bar only on the container because its content is overflowing. Te be more accurate the scroll bar is on #grid-item and not the container which is logical since this one is having overflow:auto.
Add border to better see this:
html {
height: 100%;
background:#fff;
}
body {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
background:red;
}
#header {
background-color: brown;
flex: 0 0 100px;
}
#grid-container {
flex: 1 1 auto;
display: grid;
overflow: hidden;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
border:5px solid green;
}
#grid-item {
grid-column: 1/2;
grid-row: 1/2;
overflow: auto;
border:5px solid blue;
}
#list {
/* overflow: auto; not needed*/
border:5px solid yellow;
}
#list-item {
font-size: 140px;
}
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<div id="header"></div>
<div id="grid-container">
<div id="grid-item">
<div id="list">
<div id="list-item">1</div>
<div id="list-item">2</div>
<div id="list-item">3</div>
<div id="list-item">4</div>
<div id="list-item">5</div>
<div id="list-item">6</div>
</div>
</div>
</div>
</body>
</html>
You can also set overflow:auto to the container and you will have the scroll on the container and almost the same result
html {
height: 100%;
background:#fff;
}
body {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
background:red;
}
#header {
background-color: brown;
flex: 0 0 100px;
}
#grid-container {
flex: 1 1 auto;
display: grid;
overflow: auto;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
border:5px solid green;
}
#grid-item {
grid-column: 1/2;
grid-row: 1/2;
border:5px solid blue;
}
#list {
/* overflow: auto; not needed*/
border:5px solid yellow;
}
#list-item {
font-size: 140px;
}
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<div id="header"></div>
<div id="grid-container">
<div id="grid-item">
<div id="list">
<div id="list-item">1</div>
<div id="list-item">2</div>
<div id="list-item">3</div>
<div id="list-item">4</div>
<div id="list-item">5</div>
<div id="list-item">6</div>
</div>
</div>
</div>
</body>
</html>
By disabling the shrink, the element and its content will overflow outside the body and also the html which will create a scroll bar on the viewport to be able to see the overflowing content. Adding overflow:auto is useless in this case since the parent height is the same as the content height.
Add background to body/html elements to better see the overflow when disabling the shrink
html {
height: 100%;
background:#fff; /*to stop the propagation of the red color*/
border:5px dotted purple;
}
body {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
background:red;
}
#header {
background-color: brown;
flex: 0 0 100px;
}
#grid-container {
flex: 1 0 auto;
display: grid;
overflow: hidden;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
border:5px solid green;
}
#grid-item {
grid-column: 1/2;
grid-row: 1/2;
overflow: auto;
border:5px solid blue;
}
#list {
/* overflow: auto; not needed*/
}
#list-item {
font-size: 140px;
}
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<div id="header"></div>
<div id="grid-container">
<div id="grid-item">
<div id="list">
<div id="list-item">1</div>
<div id="list-item">2</div>
<div id="list-item">3</div>
<div id="list-item">4</div>
<div id="list-item">5</div>
<div id="list-item">6</div>
</div>
</div>
</div>
</body>
</html>
Related: Why is a flex-child limited to parent size?
As a side note, if you remove overflow:hidden from the container the result will be the same for both cases:
html {
height: 100%;
background:#fff;
}
body {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
background:red;
}
#header {
background-color: brown;
flex: 0 0 100px;
}
#grid-container {
flex: 1 1 auto;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
border:5px solid green;
}
#grid-item {
grid-column: 1/2;
grid-row: 1/2;
overflow: auto; /*will do nothing*/
border:5px solid blue;
}
#list {
/* overflow: auto; not needed*/
border:5px solid yellow;
}
#list-item {
font-size: 140px;
}
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<div id="header"></div>
<div id="grid-container">
<div id="grid-item">
<div id="list">
<div id="list-item">1</div>
<div id="list-item">2</div>
<div id="list-item">3</div>
<div id="list-item">4</div>
<div id="list-item">5</div>
<div id="list-item">6</div>
</div>
</div>
</div>
</body>
</html>
This is due to The Automatic Minimum Size of Flex Items that will prevent the shrink effect.