I have the following html tree:
div with padding: 2rem 1.25rem;
div with max-width: none so that it overflows past the screen's width
The padding is applied correctly on the top, bottom and left side, but not on the right.
I know what's the problem but I'm not sure how to solve it. The parent div has a width of 375px, which is the screen's width, whereas the child div has 890px. How can I make the parent expand like the child?
There are a few other ancestors for the parent div above. Do I need to make all of them expand?
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
display: flex;
flex-flow: row nowrap;
padding: 2rem 1.25rem;
}
.child {
background-color: #f5f8ff;
border: 1px solid #eff5f5;
display: flex;
flex-flow: row nowrap;
min-width: 100vw;
}
.item {
align-items: center;
display: flex;
flex-flow: row nowrap;
justify-content: center;
height: 44px;
width: 256px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<div class="item">Foo</div>
<div class="item">Bar</div>
<div class="item">Baz</div>
<div class="item">Qux</div>
</div>
</div>
</body>
</html>
Your question is very vague but if you want your parent div to just basically always be just big enough to house your child div. You can try setting your parent div to display: inline.
.parentdiv{
display: inline;
}
And by not setting a width. The parent div will always just be big enough to hold its children divs.
Hope this helps.
Give this a try:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
display: flex;
flex-flow: row nowrap;
padding: 2rem 1.25rem;
}
.child {
background-color: #f5f8ff;
border: 1px solid #eff5f5;
display: flex;
flex-flow: row nowrap;
min-width: 100%;
}
.item {
text-align: center;
flex: 0 0 25%;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<div class="item">Foo</div>
<div class="item">Bar</div>
<div class="item">Baz</div>
<div class="item">Qux</div>
</div>
</div>
</body>
</html>
Related
I'm trying to center a text in the middle of my screen. For some reason it doesn't work. Can someone please take a look at the following index.html and explain to me what I am doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header {
display: flex;
background-color: black;
padding: 2rem;
}
.outer-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
.inner-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
justify-content: center;
}
span {
padding: .5rem;
}
</style>
</head>
<body>
<div class="parent-container">
<div class="header">Header</div>
<div class="outer-container">
<div class="inner-container">
<h1>HEADING</h1>
<span>Some text here.</span>
</div>
</div>
</div>
</body>
</html>
I was thinking that the flex-layout fills all available space. Since my flex-direction is "column", I was expecting the outer container to fill the entire height of my screen, but apparently that's not the case.
Update:
I have now placed my outer-container and the inner-container inside a parent-container to showcase the issue I have when setting the height of the outer-container to 100vh: As you can see, the issue is that a height of 100vh for my outer-container is now too much - the correct height would be 100vh minus the height of the header.
add justify-content: center; on both containers
Your container does not take all screen height and vertical alignment is missing. Here is codepen https://codepen.io/ignasb/pen/KKBQzjQ with vertical and horizontal alignment. I added height and alignment css properties
.outer-container {
height: 100vh;
justify-content: center;
display: flex;
flex-direction: column;
}
Also you might want additional styles if that scrollbar appears.
body {
margin: 0;
}
The quick and dirty solution is to make the containing parent, body, .outer-container or some .wrapper, fill the full viewport with height: 100% or 100vh, eventually subtract heights of other elements in the same container and use below CSS to center its content.
display: grid; place-items: center;
snippet
/* Make sure padding/border size are part of element size */
* { box-sizing: border-box }
body { margin: 0 } /* remove default space, causes overflow */
.parent-container {
display: flex;
flex-direction: column;
height: 100vh; /* would cause overflow with body margin */
}
/* Takes space from .parent-container */
.header {
display: flex;
background-color: black;
padding: 2rem;
}
.outer-container {
flex: 1; /* Stretch to fill available space */
display: grid; place-items: center; /* Easy centering demo */
}
.inner-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
justify-content: center;
}
span {
padding: .5rem;
}
<div class="parent-container">
<div class="header">Header</div>
<div class="outer-container">
<div class="inner-container">
<h1>HEADING</h1>
<span>Some text here.</span>
</div>
</div>
</div>
I'm relatively new to web development and I can't quite figure out why I am getting overflow with a height set to 100% using flexbox. I would like to have the columns fill the entire height of the container but not overflow. Any help would be much appreciated. Also, I'm certain this is super simple.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
.leftCol{
background-color: gray;
text-align: center;
padding-right: 10px;
flex: 25%;
}
.rightCol{
background-color: lightblue;
text-align: center;
flex: 75%;
}
.row {
display: flex;
flex-wrap: nowrap;
margin: 0;
}
.canvas{
border:1px solid #000000;
width: 100%;
height: 100%;
margin: 0%;
}
</style>
</head>
<body >
<div class="row">
<div class="leftCol">
Col1
<canvas class="canvas" id="architectureCanvas"></canvas>
</div>
<div class="rightCol">
Col2
<canvas class="canvas" id="architectureCanvas"></canvas>
</div>
</div>
</body>
</html>
https://jsfiddle.net/jp64mqr7/2/
The reason why you have overflow is that you set canvas height to 100% and also you have some text above that takes some space as well, and as a result, you got overflow because you need more space than you have.
To fix it, you should probably:
On the leftCol and the righCol you should add:
display: flex;
flex-direction: column;
Also, on .canvas you should add:
height: auto;
flex-grow: 1;
JSFiddle link: https://jsfiddle.net/velid/6eo45ycj/8/
I want to display a centered image and, below it, a centered and bordered text that has a width equal to its container. I use:
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
text-align: center;
}
.d2 {
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div class="d1">
<img src="smiley.gif"><br>
<div class="d2">This is some text</div>
</div>
</body>
</html>
This works fine but, as I read, the use of <br> is an indication of poor semantic HTML and should be avoided. Is there a way to do this without the use of <br>?
Thanks
Flexbox to the rescue:
.d1 {
display: flex;
flex-flow: column;
justify-content: center;
}
.d2 {
border: 1px solid red;
}
img, .d2{
margin: 0 auto;
}
<div class="d1">
<img src="https://placekitten.com/200/300">
<div class="d2">This is some text</div>
</div>
The semantically correct element to use is the HTML5 figure element ( documentation here ) - this is a block level element and has the figcaption element and the image element contained within it.
The figcaption can be the first child (ie - before the image) or last child (after the image) and is also a block level element and can be centered with css.
<!DOCTYPE html>
<html>
<head>
<style>
figure {
text-align: center;
}
figcaption {
margin-bottom: 10px;
}
</style>
</head>
<body>
<figure>
<figcaption>This is a fluffy kitten</figcaption>
<img src="https://cdn.unifiedcommerce.com/content/product/small/30106.jpg" alt="fluffy kitten" width="100">
</figure>
</body>
</html>
Try using a div to enclose your image. A div is a block element, meaning, it will occupy 100% of the parent width. In your case, if the img tag is inside div, then all contents outside the div will be in the next line automatically.
img {
max-width: 100px;
}
.d1 {
text-align: center;
}
.d2 {
border: 1px solid red;
display: inline-block;
}
<div class="d1">
<div>
<img src="https://demo-res.cloudinary.com/image/upload/sample.jpg">
</div>
<div class="d2">This is some text</div>
</div>
You can try this.Just use margin for the text section instead of <br> tag. And then for positioning both of the image and text to center, use the following property:
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
.d2 {
border: 1px solid red;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="d1">
<img src="https://www.w3schools.com/howto/img_snow.jpg">
<div class="d2">This is some text</div>
</div>
</body>
</html>
I have an element I'd like to be (cross-axis) centered but also 'grow' to a nominal size even with too-little content, BUT ALSO 'shrink' when the width of the page becomes smaller than 350px wide.
HTML
<div class="parent">
<div class="child">
Some content
</div>
</div>
SCSS
.parent {
display: flex;
flex-direction: column;
align-items: center;
.child {
max-width: 350px;
align-self: stretch;
}
}
Adding align-self: stretch; to .child does the job of making it 350px wide, but it seems to negate the align-items: center; in .parent
Is there a way to do this in CSS that I'm missing? Please note that the element can't just be 350px wide all the time - it must also respond to horizontal page resizing as it does in the example fiddle.
Fiddle: https://jsfiddle.net/1uqpxn8L/1/
UPDATED
I think you should use justify-content to h-align child to center.
Please note, when you apply display: flex property to parent, you should apply flex property to child.
.parent {
background: yellow;
display: flex;
flex-direction: column;
align-items: center;
}
.parent .child {
background: black;
color: white;
text-align: center;
flex: 1 1 auto;
width: 100%;
max-width: 350px;
}
<div class="parent">
<div class="child">
I should be 350px wide
<br> and centered in the yellow
<br> unless the page gets smaller,
<br> in which case I should have
<br> 10px padding on either side.
</div>
</div>
Please see the result here, hope this is what you mean: https://jsfiddle.net/1uqpxn8L/11/
You can do something like this.
HTML
<div class="parent">
<div class="child">
Some content
</div>
</div>
SCSS
.parent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
.child {
width: 350px;
#media(max-width: 350px) {
width: 100%;
}
}
}
.parent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
background-color: red;
}
.child {
width: 350px;
background-color: yellow;
}
#media(max-width: 350px) {
.child { width: 100%; }
}
<div class="parent">
<div class="child">
Some content
</div>
</div>
So whats happening is I'm using a media query to change the width of the child depending on the width of the browser.
You just need to remove the flex-direction property. Then it's working as you expected. But there will be a problem if you want to display children elements as column manner. The shrinking problem occurs with the flex-direction property or flex-flow:column values as I checked.
Following to this answer, I am trying to create a perfect height for my content, But the content height is overflowing instead of getting a scroll over content.
I have created a fiddle for this scenario. Please help me fix my content height such a way that top content and always visible and scroll-able downward.
fiddle
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
display: flex;
flex-flow: column;
flex: 1 1 auto;
overflow-y: auto;
justify-content: center;
align-items: center;
}
.data {
width: 80%;
min-height: 400px;
}
.box .row.footer {
flex: 0 1 40px;
}
HTML.
<head>
<link href="./test.css" rel="stylesheet">
</head>
<body>
<div class="box">
<div class="row header">
<p>
<b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<div class="data">
invisible box1
</div>
<div class="data">
visible box2
</div>
<div class="data">
visible box3
</div>
<p>
<b>Bottom Box is visible with scroll.</b> (fills remaining space)
</p>
</div>
<div class="row footer">
<p>
<b>footer</b> (fixed height)</p>
</div>
</div>
</body>
</html>
The issue you encounter is caused by justify-content: center in the .box .row.content rule.
Remove it and your text will overflow properly.
.box .row.content {
display: flex;
flex-flow: column;
flex: 1 1 auto;
overflow-y: auto;
/*justify-content: center; removed */
align-items: center;
}
Updated fiddle
This is the default behavior for justify-content: center, where, on a flex column container, when the content overflow, it will overflow both at its top and bottom.
Read more here, where you find resources and a workaround:
How to use safe center with flexbox?
I think overflow: scroll; will fix your problem.