I have a horizontal scroll container like in the image below. It has some horizontal padding which causes the scrollbar to start too far on the left. It needs the padding so that the shadows below the cards don't get cut off by the container.
I'd like to keep the padding and make the scrollbar start where the first card starts like this:
Here's the code for the general layouts (also in Codepen):
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
p {
text-align: center;
margin: 20px 0 10px;
}
.container {
border: 1px solid;
width: 500px;
margin: 0 auto;
display: flex;
gap: 10px;
overflow: auto;
padding: 10px 0;
}
.horizontal-padding {
padding-left: 30px;
padding-right: 30px;
}
.content {
box-shadow: 0 0 5px 0;
flex: 0 0 100px;
}
<p>Current layout with padding where scrollbar starts too far on the left:</p>
<div class="container horizontal-padding">
<div class="content">Sample Content</div>
<div class="content">Sample Content</div>
<div class="content">Sample Content</div>
<div class="content">Sample Content</div>
<div class="content">Sample Content</div>
<div class="content">Sample Content</div>
</div>
<p>Layout without padding where scrollbar starts nicely with the content but shadows are cut off:</p>
<div class="container">
<div class="content">Sample Content</div>
<div class="content">Sample Content</div>
<div class="content">Sample Content</div>
<div class="content">Sample Content</div>
<div class="content">Sample Content</div>
<div class="content">Sample Content</div>
</div>
One of the posibilities is adding padding on the containers and see how much would you want to put in
or another option is to make a box or container new that you adapt it with your preferences
Also another option is using the border property of the same color that the backgounrd
Related
Given a .mainContainer which display was flex, I wanted to make a box with vertical separation lines. The restriction was that the separators shouldn't use all the vertical space, so my approach was giving it a fixed margin and making the separator use all the vertical space posible using min-height: 100% .
Like this:
<div class="mainContainer">
<div class="flexContainer">
<div class="text"> Text 1</div>
<div class="separator"></div>
<div class="text"> Text 2</div>
<div class="separator"></div>
<div class="text"> Text 3</div>
</div>
</div>
With the following styles:
.mainContainer {
display: flex;
}
.flexContainer {
display: flex;
}
.text {
background-color: #000;
color: #fff;
padding: 8px;
}
.separator {
min-height: 100%;
margin: 8px 0;
width: 4px;
background-color: red;
}
However, the separator did end overflowing the container using 100% of its height and adding the fixed margin over it.
The weird part is that changing the display of the .mainContainer from flex to block solved this issue. Can someone explain me this behavior?
I'm aware of CSS Subgrid being able to solve a layout like this, but what I'm looking to achieve is a list of containers with content inside. The content inside the containers is aligned right in the containers, but all the content is aligned (left) to the longest content.
Is this possible with flex? Are there any strategies to achieve this?
I suppose the HTML structure would be something like:
<div class="container">
<div class="content" style="100px"></div>
</div>
<div class="container">
<div class="content" style="300px"></div>
</div>
<div class="container">
<div class="content" style="400px">All other content aligned to this longest content</div>
</div>
<div class="container">
<div class="content" style="200px"></div>
</div>
It is most definitely doable with flex.
What I've done is create 2 columns inside the .container element. Column 2 will be right aligned inside the container, and your .content will be left aligned inside .column2.
All you need to do to adjust the alignment of the content inside the containers, is to play around with the widths of .column1 and .column2 in the snippet below:
* {
font-family: sans-serif;
}
.container {
display: flex;
background: lightgray;
align-items: center;
border-radius: 5px;
margin-bottom: 10px;
padding: 7px;
}
.content {
display: flex;
align-items: center;
padding: 0 10px;
background: #666;
border-radius: 5px;
color: white;
height: 50px;
}
.column1 {
width: 30%;
}
.column2 {
width: 70%;
}
<div class="container">
<div class="column1">Container</div>
<div class="column2">
<div class="content" style="width: 100px"></div>
</div>
</div>
<div class="container">
<div class="column1">Container</div>
<div class="content" style="width: 250px"></div>
</div>
</div>
<div class="container">
<div class="column1">Container</div>
<div class="column2">
<div class="content">All other content aligned to this longest content</div>
</div>
</div>
<div class="container">
<div class="column1">Container</div>
<div class="column2">
<div class="content" style="width: 200px"></div>
</div>
</div>
This question already has answers here:
Make background color extend into overflow area
(4 answers)
Closed 4 years ago.
I'm having some issues getting the children of a flex container with overflow-x take full width of its content.
The goal is to have the content items use "flex: 1 0 216px", and when they can't all fit on the screen, the scroll bar appears so users can scroll to see the rest of the content. But as you can see in the snippet below, the ".row" div for some reason doesn't take the full width of it's parent ".container", causing the background color and border to not reach the edge of the content. I've made the background of the container gray to emphasize the issue.
Here is a simplified version of the code. Thanks!
.container {
height: 100%;
background-color: lightgray;
overflow-x: auto;
}
.row {
background: lightyellow;
min-height: 48px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid gray;
display: flex;
align-items: center;
flex-basis: 100%;
width: 100%;
}
.content {
flex: 1 0 216px;
}
<div class="container">
<div class="row">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>
There is certainly some problem between flex and overflow: auto, I just didn't go too deep in that. If it is only about achieving full width for .row elements, instead of width: 100%; you can set min-width: calc(4 * 216px);, (since you have set flex-shrink: 0 and flex-basis: 216px; on .content, I assume .content will never be smaller than that... )
I am using an outline and a margin in an attempt to avoid a double border around some flex-elements.
If I apply a margin to the flex element itself it works as expected. However, if I apply the margin to a child element the double border shows up again.
Why does the outline correctly render only when the margin is applied to the parent flex element? Is this a bug?
.comment {
padding:20px;
}
#flex-container {
display: flex;
}
.flex-element {
flex-grow: 1;
}
.flex-content {
width: 100%;
height: 100%;
margin-left: 5px;
outline: 5px solid #ccc;
}
.flex-element-working {
flex-grow: 1;
margin-left: 5px;
}
.flex-content-working {
width: 100%;
height: 100%;
outline: 5px solid #ccc;
}
<div class='comment'>
Why doesn't this work?:
</div>
<div id='flex-container'>
<div class='flex-element'>
<div class='flex-content'>
<div class='comment'> Flex Content</div>
</div>
</div>
<div class='flex-element'>
<div class='flex-content'>
<div class='comment'> Flex Content</div>
</div>
</div>
</div>
<div class='comment'>
Working Example:
</div>
<div id='flex-container'>
<div class='flex-element-working'>
<div class='flex-content-working'>
<div class='comment'> Flex Content</div>
</div>
</div>
<div class='flex-element-working'>
<div class='flex-content-working'>
<div class='comment'> Flex Content</div>
</div>
</div>
</div>
The point is in the top flex container (bad working) in double outline the left on is for the right div and the right one is for left div! Please add this style to your code:
.flex-content{background-color:red;}
You will see the out line is how you want.
.flex-content divs have width 303px But .flex-content-working divs have width 298px so in second one we have not such problem.
To see the width of your elements use developer tools of your browser and layout or box menu.
A bit another approach using padding and box-shadow:
#flex-container {
box-shadow: inset 0 0 0 2px red;
display: flex;
padding: 2px;
}
.flex-element {
flex-grow: 1;
box-shadow: inherit;
}
.comment {
padding: 20px;
}
<div id='flex-container'>
<div class='flex-element'>
<div class='flex-content'>
<div class='comment'> Flex Content</div>
</div>
</div>
<div class='flex-element'>
<div class='flex-content'>
<div class='comment'> Flex Content</div>
</div>
</div>
</div>
I have this simple setup:
.container {
display: table;
width: 70%;
text-align: center;
}
div {
border: 1px solid #336;
}
.column {
display: table-cell;
}
<div class="container">
<div class="column">Column 1.</div>
<div class="column">Column 2 is a bit longer.</div>
<div class="column">Column 3.</div>
</div>
jsFiddle: http://jsfiddle.net/aqk1yy1d/
This table-cell behavior expands with window resize. I would like the center cell/div to be fixed to its content and not expand. Basically the sides should expand but not the inner cell, wich should be the size of its content.
I don't see how I can do this without setting a defined width somewhere, but that in not ok, because I will have different length of content in that middle cell....
Any pointers?
The trick is to set both the left and right column to take up 50% of the width of the table. The center column gets a width of 1px. If there is content larger than 1px in the center column it will force the center column to grow.
The first example only has text inside it, which will wrap at the first moment. To mitigate this add something like white-space: nowrap to keep all text on a single line or make sure that you have content with a width.
.container {
display: table;
width: 70%;
text-align: center;
margin-bottom: 10px;
}
div {
border: 1px solid #336;
}
.column {
display: table-cell;
}
.left,
.right {
width: 50%;
}
.center {
width: 1px;
}
.center-content {
white-space: nowrap;
}
<div class="container">
<div class="column left">Column 1.</div>
<div class="column center">Column 2 is a bit longer.</div>
<div class="column right">Column 3.</div>
</div>
<div class="container">
<div class="column left">Column 1.</div>
<div class="column center"><div class="center-content">Column 2 is a bit longer.</div></div>
<div class="column right">Column 3.</div>
</div>
If you can't find a better solution, you could try using javascript to set the width dynamically. Change your html to something like this:
<div class="container">
<div class="column">Column 1.</div>
<div id="column2Outer" class="column">
<div id="column2Inner" style="display: inline-block">Column 2 is a bit longer.</div>
</div>
<div class="column">Column 3.</div>
</div>
The javascript would be as follows:
$("#column2Outer").css("width", document.getElementById("column2Inner").clientWidth);
You would call this on $(document).ready() or whenever the content changes. You would of course also have to remove the border from the inner column so you can't tell it's a nested div