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?
Related
Here is a codepen.
Here is code:
HTML
<div class="body">
<div class="page">
<div class="regular-flow">
</div>
<div class="regular-flow">
</div>
<div class="regular-flow">
</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
</div>
<div class="regular-flow">
</div>
<div class="regular-flow">
</div>
</div>
</div>
CSS
.body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: grey;
}
.page {
height: 100vh;
width: 100%;
background-color: lightgrey;
overflow: hidden;
}
.regular-flow {
height: 20px;
background-color: limegreen;
margin: 10px 24px;
}
.container {
width: 100%;
height: 25%;
padding-left: 24px;
padding-right: 24px;
background-color: orangered;
display: flex;
gap: 16px;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none;
}
.item {
height: 100%;
width: 121px;
color: yellow;
background-color: blue;
flex-shrink: 0;
}
We have several "regular flow" items (green) that keep their own margin consistently down the page (grey). However, I'd like to have a horizontal scrolling div (blue and orangered) that disrespects these boundaries, allowing items to seemingly pass from "edge" to "edge" of the screen. My thought was to overflowX: 'scroll' a 100% width div and put padding on the left and right equal to the margin being set by the other items. This way, on the "edges" of the scrollable content, it appears to still respect the margin set by the other regularly flowing items. However, no matter what I try or how many items you put into this container, it will always scroll right only to the right edge of the last item. It will not show the last bit of right padding.
Things to keep in mind about the codepen
You have to have enough items for it to need to scroll horizontally, obviously.
I am hiding the scrollbar, so hover over the blue/orange container and shift+scrollwheel to move the items. I know this isn't great UX.
Most Basic Question
Why can you not scroll right far enough such that the padding-right (orangered) is visible?
Update
I was able to come up with a workaround for this issue, and that is to go into the parent component (in my codepen, this would be .container and remove the padding-right and padding-left at that level, but then add:
.container & .div:first-child {
padding-left: 24,
}
.container & .div:last-child {
padding-right: 24,
}
This seems to accomplish the same goals, but only if you do NOT have any background color to the .item. For my purposes, this works. I only added a background color here for visualizing the issue. I would still be curious if anyone can tell me what the problem above was, so I will keep this question up and not edit the codepen. Thanks!
I have the parent's block (red) that should change its size by height relatively the content filling inside the green block.
The green block has an absolute position, and this is a must.
The question is about the content filling of the green block and the logical automatical size changing of the red block.
So, 2 question:
How to center the green block by the horizontal/center?
How to automatically change the red block's height relatively the content filling of the green block?
<body>
<div class="some"></div>
<div class="container">
<div class="main">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>
</body>
body {
background: purple;
}
.some {
height: 100px;
}
.container {
width: 1030px;
height: 600px;
background: red;
position: relative;
margin: auto;
}
.main {
position: absolute;
background: green;
margin-top: -50px;
width: 400px;
}
.content {
width: 300px;
height: 100px;
background: blue;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
http://jsfiddle.net/xtupmyvf/2/
I have created a sample solution here https://jsfiddle.net/saksham_malhotra/upnrfjm0/
There is a lot going on in your code which is unnecessary and I have written a simplified version of it. The crux is to take care of the display properties to get a good layout.
You need not make the left section absolute positioned to stick it to the left. Just make the wrapping container display: block to not to take the whole width.
I have 2 spans inside a div:
html:
<div class="main">
<span class="title"> Name</span>
<span class="values">/sys/fs/cgroup/sys/fs/</span>
</div>
here is how it looks:
http://jsfiddle.net/tdrgz1yj/
as you can see the size and volume title getting pushed down when I have long text for Name field. Also I cannot increase the width any more cause in actual app, the Volume field goes out of focus.
Is there a way I can align the Name, Size and Volume fields all in one line even after applying the word-break prop?
Can I make it look something like with css?
Thanks!
Yes. Just add display: flex to the .parent
Example
If you want to move the long text to the same line with the "Name" title, set display: flex to the .main as well.
Example 2
I suggest using span only to wrap inline elements. Instead, use divs :
.parent {
padding: 20px 10px;
margin: 0 0 20px;
display: flex;
width: 100%;
box-sizing: border-box;
}
.parent div {
margin-left: 20px;
}
.main {
flex-basis: 200px;
flex-grow: 1;
flex-shrink: 0;
display: flex;
}
.title {
margin-right: 20px;
display: inline-block;
}
.values {
word-break: break-word;
}
<div class="parent">
<div class="main">
<div class="title">Name:</div>
<div class="values">/sys/fs/cgroup/sys/fs//sys/fs/cgroup/sys/fs//sys/fs/cgroup/sys/fs/</div>
</div>
<div class="main">
<div class="title">Size:</div>
<div class="values">223k</div>
</div>
<div class="main">
<div class="title">Volume:</div>
<div class="values">111</div>
</div>
</div>
I have the following layout (simplified version). .account is the flex-container and .card-two holds the actual table. When there is a lot of content, everything works fine, but when .card-two doesn't have enough content (when showing error messages), it does not fill the height of its parent .content. the cards have a background color set, so the entire effect looks quite ugly.
How do I make the card behave and stretch to fill its container? I tried setting height on .account, setting flex-basis:1 0 0, but it doesn't work. setting height:100% to .card-two just makes it massively overflow its parent. Note: I do not have a lot of control on the HTML.
HTML code:
<div class="container">
<div class="account">
<div class="sidebar">This is a sidebar aka the first column</div>
<div class="content">
<div class="card-one">this is card number one. full width of the parent</div>
<div class="card-two">this card should have a lot of content. but sometimes it doesn't.</div>
</div>
</div>
</div>
CSS (without the changes I have tried):
.container{
// just a generic container.
width:1140px; margin:auto;
}
.account{
display: flex;
}
.sidebar{
width: 25%;
}
.content{
width: 75%;
}
here's a codepen (with some comments as to what I have tried): https://codepen.io/samia92/full/MVJqwQ
any help is much appreciated.
You need to add flex to .content then only card-two can have flexbox properties.
.container {
width: 600px;
margin: auto;
box-sizing: border-box;
}
.account {
display: flex;
height: 400px;
}
.card {
background: #ddd;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);
padding: 15px;
}
.sidebar {
width: 25%;
margin-right: 10px;
}
.content {
width: 75%;
display: flex; /*Addded*/
flex-direction: column; /*Addded*/
}
.card-one {
margin-bottom: 20px;
}
.card-two {
flex: 1; /*Addded*/
}
<div class="container">
<div class="account">
<div class="sidebar card">
This is a sidebar aka the first column
</div>
<div class="content">
<div class="card-one card">
<p>this is card number one. full width of the parent</p></div>
<div class="card-two card"><p>this card should have a lot of content. but sometimes it doesn't.</p>
<p>I want it to expand to it's parent, which has appropriate height</p>
<p>There You go.</p>
</div>
</div>
</div>
</div>
I'm trying to make this layout (I've made a picture to explain what i want to do):
So I've 4 divs where I'm going to put some text inside. I've used flexbox and justify content to align them center, but i want to put a text "Latest News" that is aligned with the first div (in this case Element 1).
I'm not able to think about an elegant solution to my problem, so I'm here to ask for help.
.wrapper{
display: flex;
justify-content: center;
}
.box{
height: 200px;
background-color: red;
margin: 10px;
width: 200px;
}
<p class="section-title">Latest News</p>
<div class="wrapper">
<div class="box">Element 1</div>
<div class="box">Element 2</div>
<div class="box">Element 3</div>
<div class="box">Element 4</div>
</div>
There are a few ways you can do it, and it depends how dynamic your box elements are going to be.
One simple solution that works for n boxes is to include the section title to the first box and give it position: absolute whilst adding margin-top to the wrapper to make space for the title.
https://codepen.io/anon/pen/MJpOrM
.wrapper {
display: flex;
justify-content: center;
margin-top: 40px;
}
.box {
height: 200px;
background-color: red;
margin: 10px;
width: 300px;
}
.section-title {
position: absolute;
top: 0px;
}
<div class="wrapper">
<div class="box">
<p class="section-title">Latest News</p>
Element 1
</div>
<div class="box">Element 2</div>
<div class="box">Element 3</div>
<div class="box">Element 4</div>
</div>
Considering that you have a fixed width for your boxes, the easiest solution is to make the section-title a fixed width too:
.section-title {
width: 1260px; //This is merely 300 * 4 + the margin
margin: auto;
}
https://codepen.io/anon/pen/BpWmJV