I have a flex container that contains some flex items. I would like the items to expand by default to contain all of their content without horizontally overflowing the flex container. As you can see from the attached image, "Content 7" is overflowing.
How the flex-container looks currently:
HTML:
<div class="flexContainer">
<div class="flexItem">Content 4</div>
<div class="flexItem">Content 5</div>
<div class="flexItem">Content 6</div>
<div class="flexItem">Content 7 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero deleniti veritatis iste at odit, quae placeat. Voluptas, dolorem dolore.</div>
<div class="flexItem">Content 8</div>
</div>
CSS:
.flexContainer {
display: flex;
width: 800px;
background-color: lightgray;
height: 150px;
border: 4px solid black;
gap: 10px;
align-items: center;
}
.flexItem {
background-color: darkcyan;
flex-basis: 0px;
flex: 1;
}
Changing height: 150px in .flexContainer to height: fit-content will do the job. Now the height of .flexContainer will expand until everything fits inside.
Change to the following code:
.flexContainer {
display: flex;
width: 800px;
height: fit-content;
background-color: lightgray;
border: 4px solid black;
gap: 10px;
align-items: center;
}
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed last month.
I am not able to get the ellipses to work inside a flex box. I have gone over a ton of examples and answers on how to do this but nothing is working. I need to shorten the long text with an ellipses in column 2.
* {
box-sizing: border-box;
}
.application {
display: flex;
width: 100%;
height: 100%;
border: 2px solid red;
margin: 10px;
}
.container1,
.container2 {
flex: 1 1 auto;
display: flex;
flex-direction: column;
margin: 10px;
border: 1px solid green;
}
.container2 {
border: 1px solid purple;
}
.row {
display: flex;
width: 100%;
padding: 5px;
}
.col1 {
width: 100px;
background: lightgreen;
}
.col2 {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col3 {
width: 60px;
background: yellow;
}
<div class="application">
<div class="container1">
<div class="row">
<div class="col1"> </div>
<div class="col2">This is a short Text</div>
<div class="col3"></div>
</div>
<div class="row">
<div class="col1"></div>
<div class="col2">
Lorem ipsum dolor sit amet. Id totam perspiciatis qui adipisci delectus id molestiae quas et voluptatem tenetur est provident rerum. Et error molestiae sed nihil suscipit et ullam galisum et ratione nesciunt!
</div>
<div class="col3"></div>
</div>
</div>
<div class="container2"></div>
</div>
You need to add a specific width in px.
max-width: value; / width: value;
Either width or max-width works well.
Here is the new code :)
* {
box-sizing: border-box;
}
.application {
display: flex;
width: 100%;
height: 100%;
border: 2px solid red;
margin: 10px;
}
.container1,
.container2 {
flex: 1 1 auto;
display: flex;
flex-direction: column;
margin: 10px;
border: 1px solid green;
}
.container2 {
border: 1px solid purple;
}
.row {
display: flex;
width: 100%;
padding: 5px;
}
.col1 {
width: 100px;
background: lightgreen;
}
.col2 {
flex: 1;
min-width: 0;
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col3 {
width: 60px;
background: yellow;
}
<div class="application">
<div class="container1">
<div class="row">
<div class="col1"> </div>
<div class="col2">This is a short Text</div>
<div class="col3"></div>
</div>
<div class="row">
<div class="col1"></div>
<div class="col2">
Lorem ipsum dolor sit amet. Id totam perspiciatis qui adipisci delectus id molestiae quas et voluptatem tenetur est provident rerum. Et error molestiae sed nihil suscipit et ullam galisum et ratione nesciunt!
</div>
<div class="col3"></div>
</div>
</div>
<div class="container2"></div>
</div>
Check out this fiddle: https://jsfiddle.net/8dvhx0ap/1/
Or here the HTML:
.sidenav {
height: 100%;
width: 160px;
position: fixed;
top: 0;
left: 0;
background-color: black;
display: flex;
}
.smallDiv {
background-color: green;
padding: 10px;
}
.bigDiv {
background-color: blue;
padding: 10px;
width: 60vw;
height: 60vh;
}
.main {
margin-left: 160px;
flex: 1 1 auto;
}
.container {
width: 100%;
display: block;
box-sizing: border-box;
padding: 20px;
}
.grid {
justify-content: center !important;
width: 100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
<div id="app">
<div style="height: 50px; background-color: red;"></div>
<aside class="sidenav"></aside>
<div class="main">
<div class="container">
<div class="grid">
<div class="smallDiv">
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
</div>
<div class="bigDiv">
</div>
</div>
</div>
</div>
</div>
I want the blue div to fill the empty space. On a normal screen, the green div should be on the left, and the big right space should be filled entirely by the blue div (use the space to the right and bottom but without scrollbars). Changing the page size would result in the blue div getting bigger / smaller. If the screen becomes too small (e.g. I use a phone), the 2 divs should be below each other (like currently).
How can I make the blue div fill the space?
I noticed that the top red div was actually partially hidden by the black sidenav div. So, this meant that the HTML needed to be refactored. Adding content makes it possible to see how it should behave.
You probably also want the black sidenav div to disappear on mobiles, and that can be achieved with a suitable media query.
.container {
display: flex;
flex-direction: row;
}
.main {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.sidenav {
flex-basis: 160px;
flex-shrink: 0;
color: white;
background-color: black;
display: flex;
}
.topDiv {
flex-grow: 1;
height: 60px;
background-color: red;
}
.grid {
display: flex;
flex-direction: row;
}
.smallDiv {
background-color: green;
padding: 10px;
}
.bigDiv {
background-color: blue;
}
#media only screen and (max-width: 600px) {
.grid {
flex-direction: column;
}
}
<div class="container">
<aside class="sidenav">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel facilis alias incidunt aperiam sequi a earum delectus nam similique nostrum, tenetur esse aliquid veritatis dicta tempore? Error asperiores tempore illo!</aside>
<div class="main">
<div class="topDiv">
<h1>A Heading</h1>
</div>
<div class="grid">
<div class="smallDiv">
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
</div>
<div class="bigDiv">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet ab doloribus nostrum deleniti debitis, et odit tempora obcaecati perferendis dolorum ratione asperiores odio ipsum. Sequi consequatur qui nisi quibusdam praesentium!
</div>
</div>
</div>
</div>
I have the effect I am looking for: Content is "centered" in a container with an offset and will gracefully center itself as the window/container shrinks. In my case my yellow content is 25% of the way in from the left in the main container and will become centered when the screen shrinks.
Is there a better or more efficient way of accomplishing this? I have tried the css functions min and clamp but I couldn't achieve what I was looking for.
.container {
background: red;
padding: 2rem;
}
.squish {
margin: 0 auto;
max-width: max-content;
}
.width50 {
min-width: 50vw;
}
.content {
width: 10em;
background: yellow;
padding: 1rem;
}
<div class="container">
<div class="squish">
<div class="width50">
<div class="content">
Sequi distinctio veniam corrupti nihil non. Ea sunt dolorum pariatur accusamus. Eveniet non atque rerum et sed soluta. Magnam quia adipisci iste consectetur velit et perspiciatis
</div>
</div>
</div>
</div>
Have you tried flexbox for this issue? You can center the element by adding display: flex; to the parent and also justify-content: center; Checkout my snippet below :)
Also checkout flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
display: flex;
justify-content: center;
padding: 5rem 0;
background-color: blue;
}
.content {
padding: 1rem;
background: white;
}
<div class="parent">
<div class="content">
<p>Text Goes here</p>
</div>
</div>
I am using flexbox and trying to get six divs to take up the remaining height of the page. Two issues I am having:
I am having trouble getting the six divs to take up the remainder of the height, but no more.
I am getting a white margin at the top of the page
My code looks like this:
<!DOCTYPE html>
<html>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
h2 {
text-align: center;
}
#all {
background-color: red;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#main {
display: flex;
width: 80%;
margin: 10px auto;
height: 100%;
}
.category {
border: solid black 2px;
flex: 1;
flex-grow: 1;
margin: 0px 20px;
height: 100%;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
</style>
<div id="all">
<h2>My page</h2>
<div id="main">
<div class="category">Category 1</div>
<div class="category">Category 2</div>
<div class="category">Category 3</div>
<div class="category">Category 4</div>
<div class="category">Category 5</div>
<div class="category">Category 6</div>
</div>
</div>
</html>
I have tried using various styles such as flex-grow, stretch, and height of 100% to the body. However, none of these seem to be doing the trick. What am I doing wrong?
The white space on the top caused by the default margins, you remove those with
*{
margin:0;
}
The one in the bottom caused by the height: 100%; on the main container see that it's display is flex it'll 100% height of the viewports height, but since there's an h1 pushing, the #main is being pushed therefore the children with height 100% are pushed aswell, you can either remove the height 100% from the #all or remove h1.
I removed the height 100% from #id, because an element's height should be defined by it's content.
*{
margin:0;
box-sizing:border-box;
}
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
h2 {
text-align: center;
}
#all {
background-color: red;
width: 100%;
/* height: 100%; */
margin: 0px;
padding: 0px;
}
#main {
display: flex;
width: 80%;
margin: 10px auto;
height: 100%;
}
.category {
border: solid black 2px;
flex: 1;
flex-grow: 1;
margin: 0px 20px;
height: 100%;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
<div id="all">
<h2>My page</h2>
<div id="main">
<div class="category">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="category">Category 2</div>
<div class="category">Category 3</div>
<div class="category">Category 4</div>
<div class="category">Category 5</div>
<div class="category">Category 6</div>
</div>
</div>
I came up with the following solution. It requires using display: flex twice and to set the h2 to display as flex: 0 and the remainder to display as flex: 1.
<!DOCTYPE html>
<html>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#all {
background-color: red;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
h2 {
flex: 0;
text-align: center;
}
#main {
display: flex;
flex: 1;
flex-direction: row;
width: 80%;
margin: 10px auto;
height: 100%;
}
.category {
border: solid black 2px;
flex: 1;
margin: 0px 20px;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
</style>
<div id="all">
<h2>My page</h2>
<div id="main">
<div class="category">Category 1</div>
<div class="category">Category 2</div>
<div class="category">Category 3</div>
<div class="category">Category 4</div>
<div class="category">Category 5</div>
<div class="category">Category 6</div>
</div>
</div>
</html>
This question already has answers here:
Make a div fill the height of the remaining screen space
(42 answers)
Closed 6 years ago.
My website has 3 section, header(navbar)+middle(content)+footer(sitemap etc).
My header is a fixed height, my footer contain sitemap which may update time to time, therefore the footer height may increase.
I want to apply 100vh on my middle. How do I use something like .middle{height: calc(100vh - footer.height);}?
Flexbox is ideal for this, check the following layout:
Footer will dynamically grow/shrink depending on content.
Middle content will always be 100% - .footer as desired.
overflow: auto; on middle .content is set in case there is more content, this way it will avoid pushing footer.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.container {
display: flex;
flex-flow: column wrap;
justify-content: center;
height: 100%;
}
.header {
border: 1px solid red;
width: 100%;
height: 60px;
}
.content {
flex: 1;
width: 100%;
border: 1px solid gray;
overflow: auto;
}
.footer {
display: flex;
width: 100%;
border: 1px solid orange;
}
<div class="container">
<div class="header">navbar</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum repellendus neque repudiandae fugiat error blanditiis omnis nesciunt nostrum porro, officia vel cum deleniti adipisci nihil perferendis eos, veniam numquam, ipsum.</div>
<div class="footer">footer</div>
</div>