This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 3 years ago.
Hoping some one can help me, I'm trying to create a split view display, with the left half of the screen been full height and the right hand side been split into quarters.
In the Left column there will be rows of text split into columns, each column should have the content truncated if exceeds width of column, the same effect should be in the 4 quarters on the right hand side. Whatever I seem to do the quarters grow in width if the content overflows. here is my primitive code...
<!DOCTYPE html>
<html>
<head>
<title>"Active Work</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: row;
margin: 0;
}
.container {
width: 100%;
background: #D7E8D4;
display: flex;
min-height: 100vh;
flex-direction: row;
margin: 0;
}
.colLeft {
width: 50%;
background: blue;
min-height: 100vh;
}
.colRight {
width: 50%;
background: green;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.grid {
height: 50vh;
flex: 0 0 50%;
}
.rowFlex {
display: flex;
flex-direction: row;
line-height: 36px;
}
.btn1 {
padding: 5px;
background-color: #00796b;
border-radius: 5px;
max-height: 30px;
margin: 0px 5px;
}
.gridHeader {
width: 100%;
}
.truncate {
overflow: hidden;
white-space: nowrap;
flex-wrap: nowrap;
flex: 0 0 50%;
background-color: yellow;
text-overflow: ellipsis;
}
.spanDiv {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="colLeft">
<div class="rowFlex">
<div>Some Text</div>
<div class="btn1">G1</div>
<div class="btn1">G2</div>
<div class="btn1">G3</div>
<div class="btn1">G4</div>
</div>
</div>
<div class="colRight">
<div class="grid" style="background-color:#ff8a80;">
<div class="rowFlex">
<div class="gridHeader">GROUP1</div>
</div>
<div class="rowFlex">
<div class="truncate">LCT-56477</div>
<div class="truncate"><span class="spanDiv">LCT-5647 cvvfvdfgdfgdfgdfgfdvhjghjghjghfvfvfv7-</span></div>
</div>
</div>
<div class="grid" style="background-color:#7b1fa2;">2</div>
<div class="grid" style="background-color:#64b5f6;">3</div>
<div class="grid" style="background-color:#80cbc4;">4</div>
</div>
</div>
</body>
</html>
Just add min-width:0 to your .grid class.
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: row;
margin: 0;
}
.container {
width: 100%;
background: #D7E8D4;
display: flex;
min-height: 100vh;
flex-direction: row;
margin: 0;
}
.colLeft {
width: 50%;
background: blue;
min-height: 100vh;
}
.colRight {
width: 50%;
background: green;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.grid {
height: 50vh;
flex: 0 0 50%;
min-width: 0;
}
.rowFlex {
display: flex;
flex-direction: row;
line-height: 36px;
}
.btn1 {
padding: 5px;
background-color: #00796b;
border-radius: 5px;
max-height: 30px;
margin: 0px 5px;
}
.gridHeader {
width: 100%;
}
.truncate {
overflow: hidden;
white-space: nowrap;
flex-wrap: nowrap;
flex: 0 0 50%;
background-color: yellow;
text-overflow: ellipsis;
}
.spanDiv {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
<div class="container">
<div class="colLeft">
<div class="rowFlex">
<div>Some Text</div>
<div class="btn1">G1</div>
<div class="btn1">G2</div>
<div class="btn1">G3</div>
<div class="btn1">G4</div>
</div>
</div>
<div class="colRight">
<div class="grid" style="background-color:#ff8a80;">
<div class="rowFlex">
<div class="gridHeader">GROUP1</div>
</div>
<div class="rowFlex">
<div class="truncate">LCT-56477</div>
<div class="truncate"><span class="spanDiv">LCT-5647 cvvfvdfgdfgdfgdfgfdvhjghjghjghfvfvfv7-</span></div>
</div>
</div>
<div class="grid" style="background-color:#7b1fa2;">2</div>
<div class="grid" style="background-color:#64b5f6;">3</div>
<div class="grid" style="background-color:#80cbc4;">4</div>
</div>
</div>
Related
I have the following layout (see snippet below).
This is the expected behavior.
The problem is:
Once the extra-large-content is simulated (by removing the comment on the extra-large-content CSS rule), it breaks the layout.
I would like the extra-large-content to scroll horizontally while staying inside column-3.
Is this even possible?
(the code is also available here https://codepen.io/Ploddy/pen/NWXOgMG?editors=1100)
body {
height: 1920px;
margin: 0;
}
.container {
display: flex;
border: 1px solid #ccc;
margin: 1rem;
}
.container > * {
border: 1px solid #ccc;
position: sticky;
top: 0;
align-self: flex-start;
flex-grow: 1;
margin: 1rem;
}
#column-3 {
height: 300px;
}
#extra-large-content {
background-color: lightgreen;
/*width: 3000px;*/
}
<div class="container">
<div>
column-1
</div>
<div class="container">
<div>
column-2
</div>
<div id="column-3">
column-3
<div id="extra-large-content">
extra-large content
</div>
</div>
</div>
</div>
This should work nicely for you. Essentially, I just specified width's on the .container elements. In theory, you could put overflow-x: scroll; on the .container, however, this would break your sticky positioning.
Edit ~ OP wants the extra-large content to scroll horizontally, not the entire column-3.
Set overflow-x: scroll; on the new parent wrapper of the div that has the 3000px static width.
body {
height: 1920px;
margin: 0;
}
.container:first-child {
max-width: 100%;
}
.container:first-child > div:first-child {
width: 40%;
}
.container:nth-child(2) {
width: 60%;
}
.container:nth-child(2) > div:first-child {
margin: 1em 0em 1em 1em;
}
.container {
display: flex;
border: 1px solid #ccc;
margin: 1rem;
}
.container>* {
border: 1px solid #ccc;
position: sticky;
top: 0;
align-self: flex-start;
flex-grow: 1;
margin: 1rem;
}
.wrapper {
display: flex;
flex-direction: column;
width: 40%;
}
#column-3 {
background-color: salmon;
}
#extra-large-content {
height: 300px;
width: 3000px;
background-color: lightgreen;
}
.xl-content-wrapper {
overflow-x: scroll;
}
<div class="container">
<div>column-1</div>
<div class="container">
<div>column-2</div>
<div class="wrapper">
<div id="column-3">column-3</div>
<div class="xl-content-wrapper">
<div id="extra-large-content">extra-large content</div>
</div>
</div>
</div>
</div>
The issue comes from using flexbox.
Switching to grid fixes the problem.
body {
height: 1920px;
margin: 0;
}
#primary-container {
position: relative;
display: flex;
margin: 1rem;
}
#secondary-container {
position: relative;
display: grid;
grid-template-columns: max-content 1fr;
align-items: start;
}
#column-3 {
display: grid;
grid-auto-rows: min-content;
height: 200px;
}
#content-wrapper {
overflow: auto;
}
#extra-large-content {
width: 3000px;
background-color: lightgreen;
}
.sticky {
position: sticky;
top: 0;
align-self: flex-start;
}
.border {
border: 1px solid #ccc;
}
<div id="primary-container" class="border">
<div class="sticky">
column1
</div>
<div id="secondary-container" class="border">
<div class="sticky">
column2
</div>
<div id="column-3" class="sticky border">
column3
<div id="content-wrapper">
<div id="extra-large-content">
extra-large content
</div>
</div>
...
</div>
</div>
</div>
I have a list of messages (which is a flex child) in a container with unknown height and want to make them scrollable. But I cannot find a proper combination of flex-grow: 1, min-height: 0 and other flex tricks to make it working - message list is still bigger than its parent.
When I add overflow-y: auto to its parent - it works but this parent besides messages list includes some content which should not scroll.
Here's my example for this case: https://jsfiddle.net/ecbtrn58/2/
<div class="page">
<div class="messages-section">
<div class="header">Your messages</div>
<div class="content">
<img src="https://http.cat/100" width="70" height="50"/>
<div class="messages-list">
<div class="message">Hi.</div>
<div class="message">Hello.</div>
<div class="message">Good morning.</div>
<div class="message">Yo!</div>
</div>
</div>
</div>
</div>
.page {
background-color: #ddd;
width: 300px;
height: 300px;
.messages-section {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
background-color: #ccc;
.header {
background: #bbb;
padding: 5px;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
.messages-list {
display: flex;
flex-direction: column;
overflow-y: auto;
/* What to add here to make it scrollable? */
.message {
height: 50px;
margin: 10px;
padding: 10px;
background: #1dc497;
}
}
}
}
}
How can I make messages list to scroll?
You have to set the height of .content to 100% and make it scrollable:
.page {
background-color: #ddd;
width: 300px;
height: 300px;
}
.page .messages-section {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
background-color: #ccc;
}
.page .messages-section .header {
background: #bbb;
padding: 5px;
}
.page .messages-section .content {
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
height: 100%;
overflow-x: scroll;
}
.page .messages-section .content .messages-list {
display: flex;
flex-direction: column;
overflow-y: auto;
/* What to add here to make it scrollable? */
}
.page .messages-section .content .messages-list .message {
height: 50px;
margin: 10px;
padding: 10px;
background: #1dc497;
}
<div class="page">
<div class="messages-section">
<div class="header">Your messages</div>
<div class="content">
<img src="https://http.cat/100" width="70" height="50" />
<div class="messages-list">
<div class="message">Hi.</div>
<div class="message">Hello.</div>
<div class="message">Good morning.</div>
<div class="message">Yo!</div>
</div>
</div>
</div>
</div>
I am trying to create 2 column divs in which one of them is scrollable horizontally (no wrap), but it keeps overflowing his parent container. The problem is both divs are using flex to calculate their size.
Is there a way to prevent the overflowing except using a fixed width on one of them?
<div class="container">
<div class="small-container">
</div>
<div class="large-container">
<div class="horiz-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
body {
margin: 0;
}
div {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row;
background-color: grey;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.small-container {
display: flex;
flex-direction: column;
flex: 0 0 200px;
background-color: salmon;
margin: 10px;
box-sizing: border-box;
}
.large-container {
display: flex;
flex-direction: column;
flex: 1 0 0;
background-color: lightBlue;
margin: 10px;
box-sizing: border-box;
}
.horiz-container {
display: flex;
flex-direction: row;
height: 200px;
background-color: purple;
flex-wrap: nowrap;
width: 100%;
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
}
https://jsfiddle.net/0m6Lj2re/
The changes made are in classes .large-container, .horiz-container and .box
body {
margin: 0;
}
div {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row;
background-color: grey;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.small-container {
display: flex;
flex-direction: column;
flex: 0 0 200px;
background-color: salmon;
margin: 10px;
box-sizing: border-box;
}
.large-container {
background-color: lightBlue;
margin: 10px;
box-sizing: border-box;
overflow: hidden;
}
.horiz-container {
/*height: 200px;*/
background-color: purple;
width: 100%;
overflow: auto;
white-space: nowrap;
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
display: inline-block;
}
<div class="container">
<div class="small-container">
</div>
<div class="large-container">
<div class="horiz-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
I have the following flex layout. I need overflow to occur in div.stretchy. I would like div.stretchy to reach the boundary of the page and then overflow it's content. Per this stackoverflow post, I have tried many combinations of min-height: 0 and overflow: hidden, but div.stretchy will not shrink.
body {
margin: 0;
}
.page-wrapper {
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.sidebar {
background: blue;
flex: 0 0 40px;
}
.main {
background: green;
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.topbar {
display: flex;
flex: 0 0 40px;
background-color: red;
}
.content {
display: flex;
overflow: auto;
}
.row {
display: flex;
}
.column {
display: flex;
flex-direction: column;
}
.grow {
flex-grow: 1;
}
.card {
height: 300px;
border: solid 1px;
min-width: 600px;
}
.card .row {
justify-content: space-between;
}
.wrapper {
padding: 16px;
height: fit-content;
}
.stats {
padding: 8px;
background-color: pink;
}
.overflow-hidden {
overflow: hidden;
}
.body .column {
background-color: indigo;
}
.wide-content {
background-color: yellow;
height: 50px;
width: 800px;
}
.block {
flex: none;
width: 300px;
height: 200px;
&:nth-of-type(odd) {
background: darken(green, 10%);
}
}
<div class="page-wrapper">
<div class="sidebar">sidebar</div>
<div class="main">
<div class="topbar">topbar</div>
<div class="content">
<div class="wrapper">
<div class="card column grow">
<div class="stats row">
<span>12345</span>
<span>12345</span>
<span>12345</span>
</div>
<div class="body row grow">
<div class="column">
<span>Dynamic Width Content</span>
</div>
<div class="stretchy column grow overflow-hidden">
<div class="wide-content grow"></div>
</div>
<div class="column">
<span>Dynamic Width Content</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is a tough battle. The enemy is cunning, deceitful and ruthless. I say we launch a massive carpet bombing campaign, showering the whole area with min size overrides. That should clear out 80% of the problem. Then we send in the ground troops to finish the job :-)
* {
min-width: 0 !important;
min-height: 0 !important;
}
.page-wrapper {
display: flex;
height: 100vh;
/* width: 100vw; */
/* overflow: hidden; */
}
.sidebar {
background: cornflowerblue;
/* flex: 0 0 40px; */
flex: 0 0 100px; /* changed for demo purposes */
}
.main {
background: lightgreen;
display: flex;
flex-direction: column;
flex: 1;
}
.topbar {
display: flex;
flex: 0 0 40px;
background-color: orangered;
}
.content {
display: flex;
/* overflow: auto; */
flex: 1; /* added */
}
.row {
display: flex;
}
.column {
display: flex;
flex-direction: column;
}
.grow {
flex-grow: 1;
}
.card {
/* height: 300px; */
border: solid 1px;
min-width: 600px;
}
.stretchy {
overflow: auto;
}
.card .row {
justify-content: space-between;
}
.wrapper {
padding: 16px;
/* height: fit-content; */
display: flex; /* added */
}
.stats {
padding: 8px;
background-color: pink;
}
.overflow-hidden {
/* overflow: hidden; */
}
.body .column {
background-color: violet;
}
.wide-content {
background-color: yellow;
height: 50px;
width: 800px;
}
body {
margin: 0;
}
/*
.block {
flex: none;
width: 300px;
height: 200px;
&:nth-of-type(odd) {
background: darken(green, 10%);
}
}
*/
<div class="page-wrapper">
<div class="sidebar">sidebar</div>
<div class="main">
<div class="topbar">topbar</div>
<div class="content">
<div class="wrapper">
<div class="card column grow">
<div class="stats row">
<span>12345</span>
<span>12345</span>
<span>12345</span>
</div>
<div class="body row grow">
<div class="column">
<span>Dynamic Width Content</span>
</div>
<div class="stretchy column grow overflow-hidden">
<div class="wide-content grow">test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br></div>
</div>
<div class="column">
<span>Dynamic Width Content</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jsFiddle demo
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 4 years ago.
When I use flex-flow: column wrap, the parent element's width is not stretched.
*{
margin: 0;
padding: 0;
}
.box{
background: #f03;
position: relative;
display: inline-block;
/* top:10px; */
/* left: 10px; */
padding: 20px;
}
.in{
display: flex;
align-items: center;
flex-flow: column wrap;
max-height: 300px;
align-content: flex-start;
justify-content: space-between;
}
.item{
background: #fe3;
width: 100px;
margin-bottom: 20px;
height: 100px;
}
.item:last-child{
margin-left: 15px;
}
<body>
<div class="box">
<div class="in">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
</body>
https://jsfiddle.net/p4oLk7dz/5/
So what should I do?
You are trying to have a flex container inside the oder one, the first one needs the display flex to get the content of the element below
I would also make some small changes but it really depends on what you are trying to achive.
If this isnt what you were looking for, please comment so i can try to improve it.
Hope this works :)
.box{
background: #f03;
position: relative;
display: flex;
max-width: 220px;
padding: 20px;
}
.in{
display: flex;
flex-wrap: wrap;
max-width: 220px;
}
*{
margin: 0;
padding: 0;
}
.box{
background: #f03;
position: relative;
display: flex;
max-width: 220px;
padding: 20px;
}
.in{
display: flex;
flex-wrap: wrap;
max-width: 220px;
}
.item{
background: #fe3;
width: 100px;
margin-bottom: 20px;
height: 100px;
}
.item-2{
order: 3;
}
.item-3{
margin-left: 20px;
}
<body>
<div class="box">
<div class="in">
<div class="item">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>
</div>
</body>
<!-- 第三个并没有把父元素宽度撑开 -->
Remove the display properties from this class
.box{
background: #f03;
display: inline-block;
display:relative;
/* top:10px; */
/* left: 10px; */
padding: 20px;
}
and everything works !!!
*{
margin: 0;
padding: 0;
}
.box{
background: #f03;
padding: 20px;
}
.in{
display: flex;
align-items: center;
flex-flow: column wrap;
max-height: 300px;
align-content: flex-start;
justify-content: space-between;
}
.item{
background: #fe3;
width: 100px;
margin-bottom: 20px;
height: 100px;
}
.item:last-child{
margin-left: 15px;
}
<body>
<div class="box">
<div class="in">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
</body>
you can check the result here https://jsfiddle.net/p4oLk7dz/30/