i have flexbox container and divs in it. I want the content to stay inside the div. In the sense that if the content exceeds the width of div then it should start from next line.
What i have tried doing?
used white-space: nowrap property. This added horizontal scrollbar which is not desired.
Below is the code,
CSS:
.notification_message_wrapper {
width: calc(100% - 450px);
position: absolute;
top: 105px;
left: 250px;
margin: 0 auto;
display: flex;
align-items: center;
.box {
background-color: white;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
top: 100px;
left: 250px;
flex: 1;
}
.message {
display: flex;
color: green;
flex-direction: column;
justify-content: space-between;
font-weight: normal;
padding: 10px;
white-space: nowrap;
.content {
height: auto;
white-space: nowrap;
}}}
HTML:
<div class="box_wrapper">
<div class="box">
<div class='message>
<div class="container">
<div>title</div>
<div>detail</div>
<div>
<div>
<h2>Debug</h2>
someresponse
<div/></div></div></div></div>
<div>close</div></div>
The divs with title, detail should not go out of the div...how could i solve this. could someone help. thanks.
just add overflow: auto; or overflow: hidden to your div. refer this link https://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow
Related
Let's say I have a couple elements arranged in a column (using flexbox):
And I would like to "spotlight" element #2 in green and set it aside, but let the rest of the elements remain ordered in a column:
Is there a way to do this with just CSS and retain dynamic layout?
I've thought of a workaround by duplicating the green element and wrapping all of this in another flexbox layout ([2[1234]]) so that in the column case, the first green element is hidden ([#[1234]) whereas in the wider case, the second element is hidden ([2[1#34]), but this is a bit messy in the markup - and actually causes issues when the element has some kind of state (e.g. a <video>) that is expected to be retained in both cases.
I've also thought about using position: absolute on the green element, but I couldn't get that to work nicely either: once I set position: relative on the top-level (black) container, I can position the green element where I want, but setting position: absolute on the column container (red) so that I can position in to the right means green element is now positioned relative to the column container again.
Is there a solution I'm overlooking?
Yes you can do this using just CSS. Here's the code for the answer to your question.
HTML:
<div class="gridcontainer">
<div class="display">
</div>
<div class="flexcontainer">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
</div>
CSS:
.gridcontainer{
display: grid;
background: yellow;
grid-template-columns: 1fr .5fr;
height: 20em;
}
.flexcontainer{
background: skyblue;
padding: .5em;
grid-column: 2;
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.card{
background: pink;
border: .1em solid red;
width: 80%;
padding: 1em;
text-align: center;
}
.flexcontainer .card:hover{
position: absolute;
width: 45%;
height: 15em;
transform: translateX(-50vw) translateY(1vh);
}
const expand = document.querySelector('.expand');
expand.addEventListener('click', () => {
expand.parentNode.classList.toggle('active');
});
body {
margin: 0;
}
aside {
display: flex;
flex-direction: column;
gap: 1em;
flex-wrap: wrap;
width: 50vw;
height: 100vh;
background-color: rgba(0, 0, 0, .1);
padding: 1em;
box-sizing: border-box;
position: relative;
transition: .2s;
}
div {
flex: 1;
background-color: rgba(0, 0, 0, .1);
display: flex;
justify-content: center;
align-items: center;
order: unset;
}
.expand {
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
padding: 0;
display: flex;
border: none;
background-color: #ddd;
border-radius: 100%;
width: 24px;
height: 24px;
box-shadow: 0 0 0 3px white;
}
.expand svg {
margin: auto;
border-radius: 100%;
transition: .2s;
}
aside.active {
width: 90vw;
}
.active .expand svg {
transform: rotate(180deg);
}
.active .two {
flex: 100 0 100%;
order: -1;
}
<aside class="aside">
<button class="expand">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm-3 5.753l6.44 5.247-6.44 5.263.678.737 7.322-6-7.335-6-.665.753z"/></svg>
</button>
<div class="one">1</div>
<div class="two">2</div>
<div class="thr">3</div>
<div class="for">4</div>
</aside>
if you want, i can answer this, but not using flexbox, using Grid.
Is there a CSS way of getting the blue line (class .cover) in this snippet to have a width equal that of the .scrl_can, which exceeds the width of its container .prnt?
The width of .scrl_can changes based on user input. A width of 100% sets the width of .cover to the width of .prnt. I tried align-items: stretch; in .prnt and it is the same as width of 100%.
I realize there are other ways of getting the blue line in that position and of the desired width, but the real UI piece has some relatively positioned elements that "drop" below the container when selected; and setting overflow-x: hidden, cuts them off; so I was trying this method which almost works.
Thank you.
.flex_can {
display: flex;
flex-flow: row nowrap;
width: 600px;
}
.space {
flex: none;
width: 150px;
height: 50px;
margin-left: 10px;
background-color: rgb(200,200,200);
}
.prnt {
flex: 1 1;
border: 1px solid black;
padding: 5px;
display: flex;
flex-flow: column nowrap;
overflow-x: scroll;
}
.scrl_can {
width: 500px;
height: 50px;
border: 0.1px solid green;
white-space: nowrap;
}
.cover {
flex: none;
width: 100%;
height: 2px;
background-color: blue;
margin-bottom: 20px;
}
<div class="flex_can">
<div class="prnt">
<div class="scrl_can">Some words here to span the width of prnt to make it a scroll can.</div>
<div class="cover"></div>
</div>
<div class="space"></div>
</div>
I would use the ::after pseudo element.
.flex_can {
display: flex;
flex-flow: row nowrap;
width: 600px;
}
.space {
flex: none;
width: 150px;
height: 50px;
margin-left: 10px;
background-color: rgb(200,200,200);
}
.prnt {
flex: 1 1;
border: 1px solid black;
padding: 5px;
display: flex;
flex-flow: column nowrap;
overflow-x: scroll;
}
.scrl_can {
position: relative;
width: 500px;
height: 50px;
border: 0.1px solid green;
white-space: nowrap;
}
.scrl_can::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: blue;
margin-bottom: 20px;
}
<div class="flex_can">
<div class="prnt">
<div class="scrl_can">Some words here to span the width of prnt to make it a scroll can.</div>
<!-- <div class="cover"></div> DON'T NEED THIS ANYMORE -->
</div>
<div class="space"></div>
</div>
I would like to center all the content of the "box" container div, then all the "items" in the "shop-box" with a space between them. This is what I've tried so far using CSS flexbox.
.shop-container {
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
margin-top: 30px;
border: 5px solid red;
width: 100%;
height: 400px;
}
.shop-box {
width: 95%;
height: 83%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 5px solid rgb(51, 255, 0);
}
.box {
display: flex;
position: absolute;
width: 100%;
margin: 5 5px;
}
.item {
background: gray;
width: 300px;
height: 300px;
margin: 0 5px;
}
<div class="shop-container">
<div class="shop-box">
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
You can do that by using a flexbox, which you already are (though with some problems).
On .shop-container you'll want either the width: 100%; or margin: 0 auto;. Both doesn't make sense (if it takes up the whole width, centering it becomes a meaningless act.
I'm not sure if you need the position: relative for some unrelated reason ? If not then i'd get rid of that.
The fact that you've wrapped the content (the 3 <a>s) within 3 layers of <div>s is generally a bad idea (again unless you have some unrelated reason to do so). I'd recommend simplifying it a lot, such as this:
.box {
display: flex;
min-width: fit-content;
flex-flow: row nowrap; /* = (horizontal) dont wrap if the items dont fit horizontally; alternatives: wrap | nowrap; */
margin: 0 auto; /* = center the box, if it happens to be not as wide as its parent */
justify-content: center; /* = (horizontal) center the <a>s ; try these alternatives: flex-start | flex-end | center | space-between | space-around | space-evenly */
align-items: flex-start; /* = (vertical) align the <a>s to the top of this container (if they were to have different heights); possible alternatives: center | stretch | flex-start | flex-end | baseline */
gap: 0.4rem; /* = space between the <a>s */
border: 0.4rem solid rgb(51, 255, 0);
}
a {
display: flex;
flex: 0 0 auto; /* = start off autosized based on the item(s) inside here; neither grow nor shrink beyond that. */
flex-flow: column nowrap; /* = (vertical) place additional content that is located within the <a> (if any) under the current content */
justify-content: flex-start; /* = (vertical) the item(s), if different heights, should cling to the top */
align-items: center; /* = (horizontal) if the <a>s were to be be allowed to grow wider than neccecary, then center the item(s) within the link; alternatives: flex-start | flex-end | center */
}
.item {
width: 300px;
height: 300px;
background: gray;
}
/* a { padding: 0.4rem; background: blue; } /* uncomment to see that the <a> could be bigger than its content */
/* a:first-child .item { height: 400px; } /* uncomment to see what happens when one of the items is taller */
/* .box { width: 800px; } .item { width: 100px; } /* uncomment to see what happens if the box was wider than neccecary */
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Perhaps this might help. I'm adding display: flex and align-items: center to the .shop-box class, and justify-content: space-between to .box.
Learn more about CSS Flexbox here.
.shop-container {
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
margin-top: 30px;
border: 5px solid red;
width: 100%;
height: 400px;
}
.shop-box {
display: flex;
align-items: center;
width: 95%;
height: 83%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 5px solid rgb(51, 255, 0);
}
.box {
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
margin: 5 5px;
}
.item {
background: gray;
width: 300px;
height: 300px;
margin: 0 5px;
}
<div class="shop-container">
<div class="shop-box">
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
How do I make the container fit the size of the content when the content size is changes? Notice the background fill does not extend when more content is added.
var text = document.getElementById("content");
text.innerText = document.body.innerText + document.body.innerText + document.body.innerText;;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
}
#view1 {
position: absolute;
background: #E5E5E5;
width: 671px;
height: 272px;
background-color: rgba(232,232,232,1);
overflow: visible;
}
#FlexGroup {
position: absolute;
width: 589px;
left: 41px;
top: 88px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
flex-wrap: nowrap;
overflow: visible;
gap: 30px;
}
#content {
position: relative;
align-self: auto;
overflow: visible;
width: 590px;
text-align: left;
font-family: Malayalam Sangam MN;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(34,44,65,1);
}
<div id="view1">
<div id="FlexGroup">
<div id="content">
<span>How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make</span>
</div>
</div>
</div>
Parent element is not aware of its child element if you set position: absolute in the child element. So, parent's height will not grow as when child element grows. To make it work, you need to set position: relative in child element
var text = document.getElementById("content");
text.innerText = document.body.innerText + document.body.innerText + document.body.innerText+ document.body.innerText;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
}
#view1 {
position: absolute;
background: #E5E5E5;
width: 671px;
height: auto;
background-color: rgba(232,232,232,1);
overflow: visible;
border: 1px solid red;
}
#FlexGroup {
position: relative;
width: 589px;
/* height:auto; */
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
flex-wrap: nowrap;
overflow: visible;
gap: 30px;
}
#content {
position: relative;
align-self: auto;
overflow: visible;
width: 590px;
text-align: left;
font-family: Malayalam Sangam MN;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(34,44,65,1);
}
<div id="view1">
<div id="FlexGroup">
<div id="content">
<span>How to make container size to content. How to make container size to content. How to make containntto content. How to make container size to content. How to make</span>
</div>
</div>
</div>
In your case you can remove height in #view1 also remove position: absolute in #FlexGroup
#view1 {
position: absolute;
background: #E5E5E5;
width: 671px;
background-color: rgba(232,232,232,1);
overflow: visible;
}
#FlexGroup {
width: 589px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
flex-wrap: nowrap;
overflow: visible;
gap: 30px;
}
Instead of position you can also move your #FlexGroup with margins if you need
Does anyone know how to align an <hr> element inside a flex-container. When I do flex-start all of the other elements align, apart from the <hr>. I need a solution that doesn't use position: absolute on the <hr> element because this affects the document flow and causes other issues.
codepen: https://codepen.io/emilychews/pen/QaPQaW
CSS
body {margin: 0; padding: 0;}
.box {
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
display: block;
background: white;
height: 3px;
width: 75px;
margin-left: 0 auto;
}
HTML
<div class="box">
<h1> Hello </h1>
<hr>
<p> Thanks </p>
</div>
The hr element has a default margin set, and in Chrome it is set to:
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
And as auto margin's in Flexbox override the justify-content/align-* properties, you need to remove it, which e.g. margin: 0; will, and make the in this case align-items: flex-start; be properly applied.
Stack snippet
body {margin: 0; padding: 0;}
.box {
color: white;
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
background: white;
height: 3px;
width: 75px;
align-self: flex-start;
margin: 0; /* added */
}
<div class="box">
<h1>Hello</h1>
<hr>
<p>Thanks</p>
</div>
Change your hr to
background: white;
height: 3px;
width: 75px;
margin-left: 0;