This question already has answers here:
How to match width of text to width of dynamically sized image/title?
(2 answers)
Closed 1 year ago.
I have a container with unknown width and two children.
I want the first child to determine the width of the container.
I want the second child to wrap inside the container.
How can I do this using e.g. flexbox?
<div class="container">
<div class="first">this determines the container width</div>
<div class="second"> if this is too long, it wraps around</div>
</div>
first you will have to add display: inline-block to your container because div by default have display: block which takes 100% width
next set .container width to max-content so it will take only as many space as it needs to fit whole content and with .first that by default have display: block this element will set width for .container
lastly set max-width: fit-content on your .second element so it will "fit" inside container.
.container {
display: inline-block;
background-color: red;
width: max-content;
}
.second {
max-width: fit-content;
}
<div class="container">
<div class="first">this determines the container width</div>
<div class="second">asd asd if this is too long, it wraps around asd asd</div>
</div>
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 7 months ago.
I have 3 divs:
<div>
<div id="div1">Title</div>
<div id="div2">Some text</div>
<div id="div3">Footer</div>
</div>
Every div have a width: 100%.
The title div height depends on its content so it can evoluate a little bit, and it has a fixed position.
The Footer div has a fixed size (its content cannot change) and a fixed position.
The goal is to have the text div between this two divs, having its size exactly matches the remaining places between title and text div so I can apply a scroll on it.
Can somebody explain to me how to do that ?
Thanks
I assume you want something like this:
#div1 {
background: rgba(0,0,250,0.2)
}
#div2 {
flex-grow: 1;
background: rgba(0,250,0,0.2);
overflow: scroll;
}
#div3 {
height: 10vh;
background: rgba(250,0,0,0.2);
}
.container {
height: 100vh;
flex-direction: column;
display: flex;
}
<div class="container">
<div id="div1">Title</div>
<div id="div2">Some text</div>
<div id="div3">Footer</div>
</div>
Judging by the clarification in your comment what you're trying to achieve is a basic layout which should be done using the <header> and <footer> tags rather than reinventing the wheel with divs.
However if you're set on using divs you should use position: absolute; or position: fixed; on the #div1 and #div3 depending on what you need the to do. Using this method you should add apropriate margins to make sure div1 and 3 dont cover div2.
This question already has answers here:
Equal height rows in CSS Grid Layout
(2 answers)
Closed 1 year ago.
So I have div A and div B.
I need div A to scale to the exact same height as div B
The two divs sit alongside each other and I need the height of Div A to be the same as B
Here is what I have tried: CSS
.container {
display: flex;
flex-direction: column;
// div a and div b
> div {
flex: 1;
}
}
HTML
<div class="container">
<div class="a">text for a</div>
<div class="b">text for b</div>
</div>
There are multiple ways to do this
the height property exists on a div.
Then you can use relative/ absolute heights like
Relative (both inherit from parent)
height: 3rem
Absolute (fixed)
height: 3em
I have a child div that increases its height on hover inside a parent div that has overflow-y set to visible. Starting recently, the parent div has been adjusting/increasing its height to match the child div's height when the child's height increases, rather than simply allowing the child div to overflow and extend outside of the parent div.
The parent div is also a child of a flexbox list which has a fixed height and fixed number of children. Each parent div in the flexbox list are intended to have equal heights and all contain a child div with varying heights.
.list {
display: flex;
flex-direction: column;
height: 100vh;
}
.parent {
height: 100%;
flex: 1 1 0%;
overflow-y: visible;
display: flex;
flex-direction: row;
}
.child {
height: 32px;
}
.child:hover {
height: 64px;
}
<div class='list'>
<div class='parent'>
<div class='child'> child </div>
</div>
<div class='parent'>
</div>
<div class='parent'>
</div>
</div>
https://jsfiddle.net/a57eofmx/3/
How do I prevent the parent div from resizing to its child?
Update: Just confirmed on a different device that the overflow behavior changed after updating from Google Chrome v.72 to v.73. More information here: Is anyone experiencing layout issues after upgrading to Chrome 72?
Would still appreciate a solution for allowing the child to extend past its parent though! Thanks in advance!
Setting the min-height to 0px for the parent fixed the issue.
I have been reading widely about this but haven't been able to solve it to my satisfaction.
I have a div (<section>) that contains one <p> and 3 <div>s. I would like to distribute the 3 divs equally in one line so that the left border of the 1st div is on the left border of the document (<body>) and the the right border of the 3rd div on the right border of the document.
I don't want to use float because the backround-color would vanish.
I have tried flex but justify-content did not yield the expected outcome.
Here's the code on JSBIN.
Thank you!
You can use display: flex on the container, and set the width of the three div elements to take up one third (or as close as we can get) of its container. The container must have a set width (either pixel or percentage) for it to work.
#container {
display: flex;
height: 600px;
width: 600px;
background-color: lightgreen;
}
#container div {
border: 1px solid black;
margin: 0 10px;
width: 33.333333%;
}
#container div img {
width: 100%;
}
<div id="container">
<div id="content1">
I'm some content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/P8z2H80.jpg">
</div>
<div id="content2">
I'm some more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/NfnBZAI.jpg">
</div>
<div id="content3">
I'm even more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/W8M37N2.jpg">
</div>
</div>
This question already has answers here:
How to match width of text to width of dynamically sized image/title?
(2 answers)
Closed 2 years ago.
Say, a parent div has two child divs, one containing text, the other containing an image of known (but variable) width & height.
I would like
the width of the first child (image-containing) div to shrink to fit the width of the image (this i can do)
the parent div (of unspecified width) to shrink to fit the width of the image-containing div (this is ok too)
the text-containing second child div (also of unspecified width) to match the parent div's width irrespective of the quantity of text it contains (this is where it gets tricky).
I have a working version that does what I want until the quantity of text in the second child pushes the parent div's width wider than that of the image.
Here's my code:
css:
#container{border:1px solid #f00;display:inline-block;}
#child1{border:1px solid #0f0;}
#child2{border:1px solid #00f;}
img {border:1px solid #000;}
html:
<div id="container">
<div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
<div id="child2">Lorem ipsum dolor sit amet.</div>
</div>
and here's a jsfiddle:
http://jsfiddle.net/BmbAS/1/
you can see where it's going wrong by clicking the 'lengthen/shorten text' link to increase the quantity of text
tldr - i want all the divs to be the same width which is equal to the width of the image
ps. modern browser solution only necessary
See this edited version of your jsFiddle.
Here's what's added to the CSS:
#container {
display: table-cell;
}
#child1 {
display: table-row;
width: 1px;
}
#child2 {
display: table-cell;
width: 1px;
}
The answer provided by #Chris leads me to the following, great solution of my case, where I need to fit the container div only to the first child element (and leave the rest child elements to auto fit to the container's width):
div.container {
width: fit-content;
max-width: 100%;
margin: 16px auto;
display: table;
}
div.inner-primary {
display: block;
}
div.inner-rest {
margin-top: 8px;
display: table-caption;
caption-side: bottom;
}
<div class="container">
<div class="inner-primary"><div style="width:200px; border:1px dotted #ccc; border-radius:4px; padding: 4px;">This is the main element that drives the width of the container.</div></div>
<div class="inner-rest">This is the first of the rest divs that fit automatically to the container...</div>
<div class="inner-rest">This is the second element...</div>
</div>
If you're willing to use a little javascript (jQuery in this example), you could set the width of the text div with the width of the image div.
Try adding $("#child2").css({'width': $('#child1').width()}); to the end of the JS in your fiddle, or check out the fork here: http://jsfiddle.net/VXEMu/