This question already has answers here:
How to force parent div to expand by child div width/padding/margin/box?
(3 answers)
Closed 4 years ago.
I think this is a pretty basic question (at least it seems to me that it's simple). I have a div (child) inside another div (parent).
I want the parent to change its size so the child is contained inside it. Currently, no matter what I do, when the child doesn't fit the browser window, it overflows and the parent remains inside the window width boundaries.
I'm using just the code bellow:
.parent {
background-color: yellow;
height: 600px;
padding-top: 30px;
}
.child {
width: 900px;
height: 300px;
background-color: red;
}
<div class="parent">
<div class="child"></div>
</div>
What can I do so the parent div grow and overflow the browser window when its child is wider than that.
Add width: max-content; to your parent div.
.parent {
background-color: yellow;
height: 600px;
padding-top: 30px;
width: max-content;
}
.child {
width: 900px;
height: 300px;
background-color: red;
}
<div class="parent">
<div class="child"></div>
</div>
Update after comments:
This solution isn't compatible with Internet Explorer and Firefox. Therefore, if possible, display: inline-block; is a better solution.
Related
This question already has answers here:
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
What is a clearfix?
(10 answers)
Closed 2 years ago.
I have always had this problem and I avoid floating div's because of this problem. The code seems to work but when you inspect the code in Google's developer tools it shows that the Main div is 0px tall. the problem I have with this is what if I want the Main div to have an image or a color. The solution I found to getting this to work is applying a float to every div so Main would also get a float but floating the Main div will break the centering of the main container. Does anyone know of a way to fix the two divs going outside of the main div?
.float-left {
float: left;
}
.float-right {
float: right;
}
main {
width: 100%;
height: auto;
background-color: darkgray;
}
.div1 {
height: 200px;
width: 50%;
background-color: darkgreen;
}
.div2 {
height: 200px;
width: 50%;
background-color: darkblue;
}
<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet" type="text/css">
<main>
<div class="div1 float-left"></div>
<div class="div2 float-right"></div>
</main>
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
Why is the parent smaller than the children on narrow screens?
See snippet... then resize your browser (width-wise) to be smaller than the pink box. The scroll bars should appear. Scroll back to the right on the page and note the green background is smaller than the pink area and there is a white spot on the right.
So few questions:
Why does it happen?
How do I prevent the parent div's green background from getting smaller than the pink box/div when the browser is resized without setting an explicit width on the parent (or anywhere else) or using overflow:hidden?
Is there a flexbox solution to this problem?
Thanks,
Thomas
.parent {
height: 400px;
background-color: green;
display: flex;
}
.item {
height: 100px;
background-color: pink;
padding: 10px;
}
<div class="parent">
<div class="item">looooooooooooooooooooooooooooong</div>
<div class="item">looooooooooooooooooooooooooooong</div>
</div>
Flex items, by default, cannot be smaller than the size of their content. Therefore, while the parent can shrink, the flex items cannot shrink past the length of the text. This causes the overflow and, as a result, the column of white space below.
The initial setting on flex items is min-width: auto. In order for each item to stay within the container, switch to min-width: 0.
.parent {
height: 400px;
background-color: green;
display: flex;
}
.item {
height: 100px;
background-color: pink;
padding: 10px;
min-width: 0; /* NEW */
}
<div class="parent">
<div class="item">looooooooooooooooooooooooooooong</div>
<div class="item">looooooooooooooooooooooooooooong</div>
</div>
Now the pink boxes are not overflowing the container anymore.
However, the text is now overflowing the pink boxes.
The question doesn't specify behavior for the text, but here's one possible solution:
.parent {
height: 400px;
background-color: green;
display: flex;
}
.item {
height: 100px;
background-color: pink;
padding: 10px;
min-width: 0; /* NEW */
text-overflow: ellipsis; /* NEW */
white-space: nowrap; /* NEW */
overflow: hidden; /* NEW */
}
<div class="parent">
<div class="item">looooooooooooooooooooooooooooong</div>
<div class="item">looooooooooooooooooooooooooooong</div>
</div>
It happens, because your .parent is a normal block element (flex is also a block-level container) and that is initialized with width:auto;, which is in your case the width of the viewport. So scrolling to the right will show white space because your div's width is smaller than the whole scrollable area.
You do that with setting the .parent to an inline element, which will respond to its childrens width.
Yes, just use display: inline-flex; on the .parent.
.parent {
height: 400px;
width: 100%;
background-color: green;
display: inline-flex;
}
.item {
flex: 1;
height: 100px;
background-color: pink;
padding: 10px;
}
<div class="parent">
<div class="item">looooooooooooooooooooooooooooong</div>
<div class="item">looooooooooooooooooooooooooooong</div>
</div>
See display on MDN.
This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 6 years ago.
I'm creating a div with 100% width of parent and now i want it to be 10% height of parent (no mater how long the content is).
I set height: 10% but it still didn't solve my problem.
Here is my css:
body {
margin: 0px;
padding: 0px;
height: 100%;
}
.header {
display: inline-block;
background-color: #008CDA;
width: 100%;
height: 10%;
margin: 0px auto;
padding: 0px;
}
All his parent must have height: 100%.
usually it looks like this:
html,
body {
height: 100%;
background-color:grey;
}
.wrap {
height: 100%;
background-color:yellow;
}
.your_div {
height: 10%;
background-color:red;
}
<div class="wrap">
<div class="your_div"></div>
</div>
Here's a quick JSfiddle showing a parent-child layed out as you describe:
https://jsfiddle.net/k0jur7yf/
{.child {
height:10%;
width:100%;
background-color: red;
}
Could you show us a snippet of your code if this doesn't solve your problem?
Check it, first make a div and its class parent.
enter image description here
Added the following class in your Css file or in head.
.parent {height:10%; width:100%;}
In div If you use width and height style in % then it will adjust according to content but when you use style in px then it will take according to size of the width and height.
example:
<div style="width:100%;height:10%;border: 3px solid red">FOr example</div>
<div style="width:100px;height:10px:border:3px solid red">
This question already has an answer here:
Height: 100% inside min-height: 100%
(1 answer)
Closed 8 years ago.
Jsfiddle: http://jsfiddle.net/techsin/csfvb91u/6/
For example take a layout like this:
<div class="cont">
<div class="a"></div>
</div>
css
.a {
background-color: blue;
height: 100%;
}
.cont {
min-height: 300px;
border:1px solid;
}
I'd expect div.a to be the size of .cont which is 300px due to min-height is set as such. However, that's not what i get. .a collapses and completely ignores height 100% UNLESS .cont is explicitly set. Ex: height 300px; no min.
Why Such flawed behavior? i need to understand reasoning.. And how can i overcome it.
You have to use min-height: inherit in .a class
.a {
background-color: blue;
min-height: inherit;
}
Link
This question already has answers here:
Center parent div with float children
(4 answers)
Closed 5 years ago.
I am trying to create a responsive grid. I have a 'parent' div which contains floating children. Depending on the page width a variable number of children is shown per 'row'. The children should be centered.
To get the 'parent' div to fit the children I set display:table on the parent div.
Please see the following fiddle:
http://jsfiddle.net/dwjbosman/cXuQ6/5/
css:
.page {
background: #a00;
width:700px;
margin: 20px;
}
.Parent {
background: #ccc;
border: 1px solid black;
display: table;
margin-left: auto;
margin-right:auto;
}
.Child {
float: left;
width: 150px;
height: 50px;
background:red;
margin: 5px;
}
.br {
clear: both;
}
html:
<div class='page'>O1
<div class="Parent">
<div class="Child">a</div>
<div class="Child">b</div>
<div class="Child">c</div>
<div class="Child">d</div>
</div>
Example O1 works as expected. However I want it to work with more floating children.
Example O2: works if I manually insert a clear: both after one row of children. This of course breaks the responsiveness of the layout.
If I leave out the 'clear' it no longer works and the result is example O3. The parent div becomes too wide and the children are no longer centered.
Is there a way to get the example O2 behavior while retaining responsive behavior?
Using CSS3, you can clear every 4th .Child, starting at #5:
div.Child:nth-child(4n+5){
clear: both;
background-color: #ddf;
}
Browser support isn't terrible: https://developer.mozilla.org/en-US/docs/CSS/:nth-child#Browser_compatibility
I forked your fiddle: http://jsfiddle.net/ghodmode/y8g2V/