Related
I have two flex children that may either each be small or large, and I'm defining small as < 50% of the container's height and large as > 50% the container's height. The sum of the heights of the children may be larger than 100% of the container's height, in which case I'd want one or both to scroll.
If one child is small and the other is large, I'd like the small element to use exactly the space it needs: it should not shrink to accommodate the large element, nor grow to 50%, and it should not scroll its contents. I'd like the large element to use the rest of the space, and scroll its contents if necessary.
If both are large, I'd like them to each use 50% of the container's height and scroll their contents.
I have this Codepen started as an example to help illustrate what I'm trying to achieve, but unfortunately it currently does no amount of scrolling or resizing: https://codepen.io/joeysilva/pen/wvmPqLK. It has both a small-large and a large-large case.
.flex-container {
height: 100px;
width: 100px;
display: flex;
flex-direction: column;
display: inline-block;
overflow: hidden;
}
.child {
flex: 50%;
overflow: auto;
}
.small {
background: red;
height: 30px;
}
.large {
background: blue;
height: 110px;
}
<div class="flex-container">
<div class="child">
<div class="small">Small</div>
</div>
<div class="child">
<div class="large">Large</div>
</div>
</div>
<div class="flex-container">
<div class="child">
<div class="large">Large 1</div>
<div class="large">Large 2</div>
</div>
</div>
Note 1: Not use disply:inline-block and display:flex the same time. Simply add another wrapper to show elements inside a row or column.
Note 2: flex: 50%; is equivalent to flex: 1 1 50%; and this is the shorthand form of flex-grow: 1; flex-shrink: 1; flex-basis: 50%;. Here in your code no need to use them because you have strictly defined the height of elements and also the basis of 50% height is wrong since you'd like the small element to use exactly the space it needs; no grow & no shrink, so it should be omitted.
.wrapper {
display: flex;
flex-direction: row;
}
.flex-container {
height: 100px;
width: 100px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.child {
overflow: auto;
}
.small {
background: red;
height: 30px;
}
.large {
background: blue;
height: 110px;
}
<div class="wrapper">
<div class="flex-container">
<div class="child">
<div class="small">Small</div>
</div>
<div class="child">
<div class="large">Large</div>
</div>
</div>
<div class="flex-container">
<div class="child">
<div class="large">Large 1</div>
</div>
<div class="child">
<div class="large">Large 2</div>
</div>
</div>
</div>
I want to use Flexbox that has some number of items that are all the same width. I've noticed that Flexbox distributes the space around evenly, rather than the space itself.
For example:
.header {
display: flex;
}
.item {
flex-grow: 1;
text-align: center;
border: 1px solid black;
}
<div class="header">
<div class="item">asdfasdfasdfasdfasdfasdf</div>
<div class="item">z</div>
</div>
The first item is a lot bigger than the second. If I have three items, four items, or n items, I want them all to appear on the same line with an equal amount of space per item.
Any ideas?
http://codepen.io/anon/pen/gbJBqM
Set them so that their flex-basis is 0 (so all elements have the same starting point), and allow them to grow:
flex: 1 1 0px;
Your IDE or linter might mention that the unit of measure 'px' is redundant. If you leave it out (like: flex: 1 1 0), IE will not render this correctly. So the px is required to support Internet Explorer, as mentioned in the comments by #fabb;
You need to add width: 0 to make columns equal if contents of the items make it grow bigger.
.item {
flex: 1 1 0;
width: 0;
}
Detail:
flex: 1 1 0 is the same as
flex-grow: 1; flex-shrink: 1; flex-basis: 0;
and if the parent container can not provide enough space for the native-size added together of every item (no space to grow), we need to make the width: 0 to give every item the same start point to grow.
You could add flex-basis: 100% to achieve this.
Updated Example
.header {
display: flex;
}
.item {
flex-basis: 100%;
text-align: center;
border: 1px solid black;
}
For what it's worth, you could also use flex: 1 for the same results as well.
The shorthand of flex: 1 is the same as flex: 1 1 0, which is equivalent to:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}
The accepted answer by Adam (flex: 1 1 0) works perfectly for flexbox containers whose width is either fixed, or determined by an ancestor. Situations where you want the children to fit the container.
However, you may have a situation where you want the container to fit the children, with the children equally sized based on the largest child. You can make a flexbox container fit its children by either:
setting position: absolute and not setting width or right, or
place it inside a wrapper with display: inline-block
For such flexbox containers, the accepted answer does NOT work, the children are not sized equally. I presume that this is a limitation of flexbox, since it behaves the same in Chrome, Firefox and Safari.
The solution is to use a grid instead of a flexbox.
When you run this snippet, make sure to click on full page to see the effect properly.
body {
margin: 1em;
}
.wrap-inline-block {
display: inline-block;
}
#div0, #div1, #div2, #div3, #div4 {
border: 1px solid #888;
padding: 0.5em;
text-align: center;
white-space: nowrap;
}
#div2, #div4 {
position: absolute;
left: 1em;
}
#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
margin: 0.5em;
color: white;
background-color: navy;
padding: 0.5em;
}
#div0, #div1, #div2 {
display: flex;
}
#div0>*, #div1>*, #div2>* {
flex: 1 1 0;
}
#div0 {
margin-bottom: 1em;
}
#div2 {
top: 15.5em;
}
#div3, #div4 {
display: grid;
grid-template-columns: repeat(3,1fr);
}
#div4 {
top: 28.5em;
}
<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>
<div id="div0">
<div>
Flexbox
</div>
<div>
Width determined by viewport
</div>
<div>
All child elements are equal size with {flex: 1 1 0}
</div>
</div>
<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>
<div class="wrap-inline-block">
<div id="div1">
<div>
Flexbox
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div2">
<div>
Flexbox
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>
<div class="wrap-inline-block">
<div id="div3">
<div>
Grid
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div4">
<div>
Grid
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
I’m not an expert with Flexbox, but I got there by setting the basis to 50% for the two items I was dealing with. Grow to 1 and shrink to 0.
Inline styling: flex: '1 0 50%',
None of these solutions worked for me, but this did:
.header {
display: flex;
}
.item {
width: 100%;
}
/* Demo styles, for aesthetics. */
.demo {
margin: 3rem;
}
.demo .item {
text-align: center;
padding: 3rem;
background-color: #eee;
margin: 0 1.5rem;
}
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
</div>
</div>
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
</div>
</div>
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
</div>
</div>
None of these answers solved my problem, which was that the items weren't the same width in my makeshift flexbox table when it was shrunk to a width too small.
The solution for me was simply to put overflow: hidden; on the flex-grow: 1; cells.
On the child element of flex,
flex: 1 1 25%
this will allow to have four items.
If you want to add more items then you can decrease the %.
This will work even if you wrapping items, like a Grid, but not so simple you should show where it will wrap in media queries)).
Example:
.flex-item {
flex: 0 0 calc(25% - (45px / 4))
}
It works like this:
$n: 4; // Number of columns
$gap: 15px; // Margin pixels
.flex-parent {
display: flex;
gap: $gap;
}
.flex-item {
flex: 0 0 calc(100% / $n - (($n - 1) * $gap / $n));
}
I was having a similar issue and found a way to cheat.
As others have said, flex-basis and flex-grow: 1 are the way to keep items the same size, but the last row is an exception when there are too few items (they fill all available space, making them larger than the other items). To stop this from happening, I added an empty spacer item with visibility: hidden and set the flex-grow value inline based on a quick calculation of how many items there were.
This is easier if you know the width of the parent container but even if you don't, you can set the flex-grow value on the spacer using media queries and breakpoints.
I'm a having a bit of an issue here. I have a flexbox container with children of different sizes. Based on quantity and their content children might overflow the parent.
What I want is the children to shrink so they try to fit in the parent container. I did that by adding shrink and overflow properties to the children. So far so good.
.container > div {
background-color: orange;
padding: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
}
I end up with something like this:
Now I want them to shrink but up to a certain point (lets say 80px). I don't care if they end up overflowing the container but I don't want to render any smaller than 80px.
Of course, I added min-width: 80px to the children... but here is my problem. I want the children to shrink up to 80px but I don't want any of those that were smaller than 80px already (like Child1, Child4 and Child5) I don't want them to be enlarged by the min-width property (or, I want them to shrink further up to min-content)
In other words. I don't want this:
I would love to have something like this:
I tried doing something like min-width: min(min-content, 80px) but of course, didn't work.
Here is an small codepen with the issue: https://codepen.io/claudiofpen/pen/QWELVJO
.container {
width: 300px;
border: 1px solid black;
display: flex;
flex-direction: row;
padding: 5px;
}
.container > div {
background-color: orange;
padding: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
min-width: min-content;
}
.container > div:not(:last-child) {
margin-right: 5px;
}
/* I don't want the following css classes, I cannot
tell in before hand which children are going to have
a larger content */
.container > div:nth-child(2),
.container > div:nth-child(3) {
min-width: 80px;
}
<div class="container">
<div>Child 1</div>
<div>Longer Child 2</div>
<div>Longer Child 3</div>
<div>Child 4</div>
<div>Child 5</div>
</div>
Temani Afif's solution solves the problem of ensuring that a text element will not shrink below the specified width unless its intrinsic width is already below that width (in which case it uses its intrinsic width as the rendered width). But it does not work unless the sum of the specified widths of all the child elements exceeds the container's width.
So I tried giving each outer elements a flex-grow parameter, so that they would grow above their specified width, if the container had room. But I also give the outer elements a maximum width set to their intrinsic maximum content width, so they would never grow beyond the actual size of the text. Thus I added the following styles to the wrapping div.
flex: 1 1 auto;
max-width: max-content;
With that tweak I believe it solves the entire problem. The elements expand fully if there is room in the container. As we add more elements the longer elements start to shrink. But they never shrink below their specified width, so the container overflows once all inserted elements have shrunk down to that width. But elements that started with a shorter width never flex at all.
I have added an example below.
.container {
width: 340px;
border: 1px solid black;
display: flex;
flex-direction: row;
padding: 5px;
}
.container>div {
background-color: orange;
padding: 5px;
flex: 1 1 auto;
width: 80px;
max-width: max-content;
}
.container>div>div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
.container>div:not(:last-child) {
margin-right: 5px;
}
<h5>When the items fit they expand to their intrinsic length</h5>
<div class="container">
<div>
<div>Medium length</div>
</div>
<div>
<div>Tiny</div>
</div>
<div>
<div>Longer text element</div>
</div>
</div>
<h5>When the container limit is reached the longer elements start shrinking</h5>
<div class="container">
<div>
<div>Medium length</div>
</div>
<div>
<div>Tiny</div>
</div>
<div>
<div>Longer text element</div>
</div>
<div>
<div>Filler</div>
</div>
</div>
<h5>Adding more elements...</h5>
<div class="container">
<div>
<div>Medium length</div>
</div>
<div>
<div>Tiny</div>
</div>
<div>
<div>Longer text element</div>
</div>
<div>
<div>Filler</div>
</div>
<div>
<div>Filler</div>
</div>
</div>
<h5>When there is no room it overflows<br> The tiny element stays at its intrinsic width, but the bigger elements stop shrinking at the specified width</h5>
<div class="container">
<div>
<div>Medium length</div>
</div>
<div>
<div>Tiny</div>
</div>
<div>
<div>Longer text element</div>
</div>
<div>
<div>Filler</div>
</div>
<div>
<div>Filler</div>
</div>
<div>
<div>Filler</div>
</div>
</div>
With an extra wrapper you can do it:
.container {
width: 300px;
border: 1px solid black;
display: flex;
flex-direction: row;
padding: 5px;
}
.container > div {
background-color: orange;
padding: 5px;
flex-shrink: 1;
width: 80px;
}
.container > div > div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
.container > div:not(:last-child) {
margin-right: 5px;
}
<div class="container">
<div><div>Ch 1</div></div>
<div><div>Longer Child 2</div></div>
<div><div>Longer Child 3</div></div>
<div><div>Child 4</div></div>
<div><div>Child 5</div></div>
</div>
Grid Solution
.container {
width: 300px;
border: 1px solid black;
display: grid;
grid-template-columns: max-content 80px 80px repeat(2,max-content);
padding: 5px;
}
You can use javascript to make the grid-template-column dynamic.
Here is the jquery (javascript) solution using flex
.container {
width: max-content;
border: 1px solid black;
display: flex;
padding: 5px;
}
$(".container > div").each(function(){
($(this).width() < 50) ?
$(this).css('width','max-content') :
$(this).css('flex','0 0 80px');
})
This is more dynamic than the grid solution. The only thing is that you will need to have a desired number in $(this).width() < 50 instead of fifty based on your content.
I want to use Flexbox that has some number of items that are all the same width. I've noticed that Flexbox distributes the space around evenly, rather than the space itself.
For example:
.header {
display: flex;
}
.item {
flex-grow: 1;
text-align: center;
border: 1px solid black;
}
<div class="header">
<div class="item">asdfasdfasdfasdfasdfasdf</div>
<div class="item">z</div>
</div>
The first item is a lot bigger than the second. If I have three items, four items, or n items, I want them all to appear on the same line with an equal amount of space per item.
Any ideas?
http://codepen.io/anon/pen/gbJBqM
Set them so that their flex-basis is 0 (so all elements have the same starting point), and allow them to grow:
flex: 1 1 0px;
Your IDE or linter might mention that the unit of measure 'px' is redundant. If you leave it out (like: flex: 1 1 0), IE will not render this correctly. So the px is required to support Internet Explorer, as mentioned in the comments by #fabb;
You need to add width: 0 to make columns equal if contents of the items make it grow bigger.
.item {
flex: 1 1 0;
width: 0;
}
Detail:
flex: 1 1 0 is the same as
flex-grow: 1; flex-shrink: 1; flex-basis: 0;
and if the parent container can not provide enough space for the native-size added together of every item (no space to grow), we need to make the width: 0 to give every item the same start point to grow.
You could add flex-basis: 100% to achieve this.
Updated Example
.header {
display: flex;
}
.item {
flex-basis: 100%;
text-align: center;
border: 1px solid black;
}
For what it's worth, you could also use flex: 1 for the same results as well.
The shorthand of flex: 1 is the same as flex: 1 1 0, which is equivalent to:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}
The accepted answer by Adam (flex: 1 1 0) works perfectly for flexbox containers whose width is either fixed, or determined by an ancestor. Situations where you want the children to fit the container.
However, you may have a situation where you want the container to fit the children, with the children equally sized based on the largest child. You can make a flexbox container fit its children by either:
setting position: absolute and not setting width or right, or
place it inside a wrapper with display: inline-block
For such flexbox containers, the accepted answer does NOT work, the children are not sized equally. I presume that this is a limitation of flexbox, since it behaves the same in Chrome, Firefox and Safari.
The solution is to use a grid instead of a flexbox.
When you run this snippet, make sure to click on full page to see the effect properly.
body {
margin: 1em;
}
.wrap-inline-block {
display: inline-block;
}
#div0, #div1, #div2, #div3, #div4 {
border: 1px solid #888;
padding: 0.5em;
text-align: center;
white-space: nowrap;
}
#div2, #div4 {
position: absolute;
left: 1em;
}
#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
margin: 0.5em;
color: white;
background-color: navy;
padding: 0.5em;
}
#div0, #div1, #div2 {
display: flex;
}
#div0>*, #div1>*, #div2>* {
flex: 1 1 0;
}
#div0 {
margin-bottom: 1em;
}
#div2 {
top: 15.5em;
}
#div3, #div4 {
display: grid;
grid-template-columns: repeat(3,1fr);
}
#div4 {
top: 28.5em;
}
<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>
<div id="div0">
<div>
Flexbox
</div>
<div>
Width determined by viewport
</div>
<div>
All child elements are equal size with {flex: 1 1 0}
</div>
</div>
<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>
<div class="wrap-inline-block">
<div id="div1">
<div>
Flexbox
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div2">
<div>
Flexbox
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>
<div class="wrap-inline-block">
<div id="div3">
<div>
Grid
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div4">
<div>
Grid
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
I’m not an expert with Flexbox, but I got there by setting the basis to 50% for the two items I was dealing with. Grow to 1 and shrink to 0.
Inline styling: flex: '1 0 50%',
None of these solutions worked for me, but this did:
.header {
display: flex;
}
.item {
width: 100%;
}
/* Demo styles, for aesthetics. */
.demo {
margin: 3rem;
}
.demo .item {
text-align: center;
padding: 3rem;
background-color: #eee;
margin: 0 1.5rem;
}
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
</div>
</div>
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
</div>
</div>
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
</div>
</div>
None of these answers solved my problem, which was that the items weren't the same width in my makeshift flexbox table when it was shrunk to a width too small.
The solution for me was simply to put overflow: hidden; on the flex-grow: 1; cells.
On the child element of flex,
flex: 1 1 25%
this will allow to have four items.
If you want to add more items then you can decrease the %.
This will work even if you wrapping items, like a Grid, but not so simple you should show where it will wrap in media queries)).
Example:
.flex-item {
flex: 0 0 calc(25% - (45px / 4))
}
It works like this:
$n: 4; // Number of columns
$gap: 15px; // Margin pixels
.flex-parent {
display: flex;
gap: $gap;
}
.flex-item {
flex: 0 0 calc(100% / $n - (($n - 1) * $gap / $n));
}
I was having a similar issue and found a way to cheat.
As others have said, flex-basis and flex-grow: 1 are the way to keep items the same size, but the last row is an exception when there are too few items (they fill all available space, making them larger than the other items). To stop this from happening, I added an empty spacer item with visibility: hidden and set the flex-grow value inline based on a quick calculation of how many items there were.
This is easier if you know the width of the parent container but even if you don't, you can set the flex-grow value on the spacer using media queries and breakpoints.
I'm looking for a CSS solution to the following:-
<div style="display:inline;">
<div>The content of this div is dynamically created but will always be wider than
the below div.
</div>
<div> Need this div to have the same width as the above div.
</div>
</div>
The wrapper div has an inline display and works as expected, both child divs have dynamically generated content. I need the bottom one to take the width of the previous sibling.
Many thanks for any suggestions in advance.
Here's another Flexbox solution which allows for the second child to wrap to match the width of the variable height sibling.
.wrapper > div {
border: 1px solid;
}
.child {
display: flex;
}
.child div {
flex-grow: 1;
width: 0;
}
.wrapper {
display: inline-block;
}
<div class="wrapper">
<div>This div is dynamically sized based on its content</div>
<div class="child"><div>This div will always be the same width as the preceding div, even if its content is longer (or shorter too).</div></div>
</div>
Edit:
To support multiple divs under .child, where each div is on its own line, add break-after: always; ...
.child div {
flex-grow: 1;
width: 0;
break-after: always;
}
Floats and tables are so 2000 and late. With today's browsers we can make the two sibling DIVs match each other's width, regardless which is bigger/smaller.
Here's a Flexbox solution fit for 2016:
.wrapper {
display: inline-block;
}
.parent {
display: flex;
flex-direction: column;
}
/* For visualization */
.child {
border: 1px solid #0EA2E8;
margin: 2px;
padding: 1px 5px;
}
<div class="wrapper">
<div class="parent">
<div class="child">Child number one</div>
<div class="child">Child #2</div>
</div>
</div>
Set your div to display:inline-block instead, this way your div will expand with the content inside of it.
http://jsfiddle.net/CpKDX/
2023 keep it simple...
Use grid and the fr unit. Then you can split up into as many equally sized rows or columns as you want:
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1em;
}
.container > div {
border: 1px solid black;
padding: 0.5em;
}
<div class="container">
<div>I'm a part of a grid. I will be split up into equal parts with my other sibling(s) depending on how many columns the grid is given.</div>
<div>I am a sibling element.</div>
</div>
Here is still a flexbox-based approach.
The essential idea: in an outermost wrapper, elements that need to be of equal width are wrapped into another wrapper.
.wrapper {
display: inline-block;
}
.flex-wrapper {
display: flex;
flex-direction: column;
}
.demo-bar {
height: 4px;
background-color: deepskyblue;
}
<div class="wrapper">
<div class="flex-wrapper">
<div contenteditable>Some editable text.</div>
<div class="demo-bar"></div>
</div>
</div>
Another practical example: an adaptive progress bar with the same width below a media (video or audio) element.
video.addEventListener("timeupdate", () =>
progress.style.width = `${video.currentTime / video.duration * 100}%`
)
.wrapper {
display: flex;
flex-direction: column;
position: relative;
align-items: center;
}
video {
display: block;
max-width: 100%;
}
.progress-bar {
height: 0.25rem;
background: #555;
}
#progress {
width: 0%;
height: 100%;
background-color: #595;
}
<div class="wrapper">
<div data-css-role="wrapper">
<video id="video" controls>
<source src="https://raw.githubusercontent.com/mdn/interactive-examples/master/live-examples/media/cc0-videos/flower.webm">
</video>
<div class="progress-bar">
<div id="progress"></div>
</div>
</div>
</div>
UPDATE: This works with me, I've just tried it:
<div style="max-width:980px;border:1px solid red;">
<div style="background:#EEE;float:left;">
<div style="width:auto;border:1px solid blue;float:left;">If you use 100% here, it will fit to the width of the mother div automatically.</div>
<div style="border:1px solid green;"> The div will be 100% of the mother div too.</div>
</div>
<div style="clear:both;"></div>
</div>
Is this what you want? The borders and background are just to show the divs ;)
Just go like this:
Let's say you want the whole divs be max. 980px (otherwise just leave that out or replace with 100%)...
<div style="max-width:980px;">
<div style="width:100%;">If you use 100% here, it will fit to the width of the mother div automatically.
</div>
<div style="width:100%;"> The div will be 100% of the mother div too.
</div>
</div>
The second option would be, to use one more div... or you use style="width:auto;" for the dynamic div...
Not sure if I understood what you are trying to do, but looks like setting a 100% width to the last div should work:
<div style="width:100%;">
BTW the style in the first div is not well defined, you should use a colon instead of a equal sign in the properties definition:
<div style="display:inline;">
If your willing to give up on a couple of <div>s then I have the solution for you:
<div style=“display: inline-block;”>
<table>
<tr>
<td>The table automatically makes its siblings the same width</td>
</tr>
<tr>
<td>So this will be as wide</td>
</tr>
</table>
</div>
Remember to set the div display:inline-block;