We Keep Coding

Determine maximum width a DOM element might grow to be?

I'm interested in querying the maximum size that a DOM element in a browser might grow to be. It is well known that an empty DOM element (without styling) has .clientWidth of 0, but adding text/images/etc. to the element might cause its width to grow. Take for instance the DOM element thisOne in the structure below:
<table style="padding: 20px; border-spacing: 100px">
<tr>
<td></td>
<td>
<div id="thisOne"></div>
</td>
</tr>
</table>
Currently #thisOne.clientWidth === 0 but if I append a large amount of text to it, its width will grow and grow, but not until it reaches document.body.clientWidth because of the columns, padding classes, etc. I am wondering how I can figure out the current maximum width of the object without doing something like:
const thisOne = document.getElementById('thisOne');
thisOne.style.visibility = 'hidden'; // do not display to user.
thisOne.innerHTML = 'blah '.repeat(2000);
const maxWidth = thisOne.clientWidth;
thisOne.innerHTML = '';
thisOne.style.visibility = 'visible';
JQuery based answers are fine, though knowing a pure HTML/JS version would be better.
(In case anyone's wondering, I'm planning on placing an SVG of music notation into the div, but I want it to have nice wrapping onto additional lines by giving the renderer a width to fit before adding it)

What you can do is to set the width of the table to 100% (so it takes all the available space of the container). Set the desired width of the other columns (<td>), either fixed or %. And set the width of the column containing #thisOne to 100%, it will span to the remaining space available (<div> is a block, so it will use the whole width by default).
<table style="padding: 20px; border-spacing: 100px; width: 100%">
<tr>
<td style="width: 100px"></td>
<td style="width: 100%">
<div id="thisOne"></div>
</td>
</tr>
</table>
Now, #thisOne will take all the available space and you can get it's width with #thisOne.clientWidth.
If you don't want #thisOne to take the whole width by default (i.e., when it's empty), you can simply not set his container td width to 100% and do it by code before you get the #thisOne.clientWidth (but you will have to get the clientWidth in a setTimeout because the browser needs to compute the layout before the clientWidth is changed).
As 小聪聪到此一游 pointed out, you can also use display: flex and flex-grow to achieve the same goal.
<div style="display: flex">
<div style="flex-grow: 0"></div>
<div style="flex-grow: 1" id="thisOne"></div>
</div>

Seems like the easiest way would be to get the width of the parent e.g.
element.parentNode().clientWidth
a div will grow only to it's parent element. unless, of course, white-space: nowrap is specified.
EDIT: this doesn't work

CSS calc() using width and position of element

I have a table, where I would like to move element div (last div) to the right.
<thead>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
...
<th>
<div>
<span></span>
<span>
<div>Move me!</div>
</span>
</div>
</th>
<tr>
<thead>
The div has following CSS and it's important, that I can't change postion to relative
{
position: absolute;
top: 0;
width: max-content;
}
I would like to add property left like this:
left: calc(100% -(position+width)),
where postion is currently x-coord of div and width is the width of the div.
How could I access this values?
PS. Currently my div is placed in such way, that it crosses the border of main div and it leads to appearing of scrollbar. I would like to avoid this by moving div to left with negative value (for example if I assign
left: -20px;
it is moving to the right and I achieve whta I want, but I can't assign it to certain value, because the width of div always changes, ,so it should be dynamically calculated)
What could be possible soultion with Javascript? How could I extract the postion? Right now offsetLeft is 0...

What about right: 0; It should stay in your main div while positioning itself on the right side of it (0 pixels from the right side).
Can you post a codepen with an example so we might help you better :)

manage selected jquery elements based on their relative child

i am showing content with php and mysql and there is a field for a photo
which has a % kinda width and i set the height with jquery to have a square
and then give the images with bigger width a bigwidth class and the ones with bigger height a bigheight class so i can give them diffrent styles the one with the bigger width gets 100% width and auto height
and the one with the bigger height gets height 100% and auto width
but with the bigger width images there is a vertical alignment problem for the photos and i cant use display table cell so i though to use padding top with jquery to fix this but since images with bigger width have diffrents ratios there should be diffrent amount of padding for each
so i want to select the parent of each bigwidth photo then get its child height then set the needed padding but i dont know how
<div class="imgpro"><img src="<?php echo("admin/uploads/".$rowpro["propic"]) ?>" class="<?php $size=getimagesize("admin/uploads/".$rowpro["propic"]);
$wsize=$size[0];$hsize=$size[1];
if($hsize>$wsize){echo("bigheight");}
else{echo("bigwidth");}
?> "/>
</div>
var a=$(".product .imgpro").css("width");
$(".product .imgpro").css("height",a);
.product .imgpro img.bigheight{height: 100%;width: auto;}
.product .imgpro img.bigwidth{width: 100%;height: auto;}
im trying to select all images parents and give them padding based on the image size in them

maintain the height of the content floating right same as the sibling div floating left, responsive

I have the below structure:
<div class="wrapper1">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
<div class="items">
<ul><li></li></ul>
</div>
The above layout is used for a responsive site. so on resizing the window or on page load on different devices the content in the right div should always remain of the same height as that of the left div.
Also, I have to append a link "more >>" responsively where the last character of the content in the right div ends.
I have used overflow hidden property for the right div and I am trying to give some height to the right div based on the window width using media queries. Have tried different things but since the text amount changes responsively it is becoming difficult to append more link to the last character.
Also, i tried using jquery/jscript to detect the height of the left div on page load so as to set the height of the right div same as that using .outerheight() property but on initial load of the page I am not able to get the height in pixels since the width of the image inside the left div is set to 100%.
Also, there are 2 main issues here,
1)I set the height of the left div same as that of the right div responsively. Here the extra content to be displayes in the right div should always be hidden.
2) append more link just where last last charcter of the last visible line of the content on the left div is responsively.
Could anyone please suggest some solution.

With flexbox the columns share the same height automatically, without any javascript.
.wrapper {
display: flex;
}
.left {
background: yellow;
flex: 1;
}
.right {
background: red;
flex: 1;
}
<div class="wrapper">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>

I believe all your problem will be solved if and only if you use bootstrap css rules the grid system and furthermore make a class with specific height and assign it to the div . And more advice get familiar with media query in css3
Create a div with relative position for appending links and make it in the bottom of the container div

Height of the table to be constant

I'm trying to make a table let's say 400px height, and I want this value to never change when I modify the height of table rows with `Javascript? Is there any property that allows height of rows never to be bigger than a certain value?

I am not sure what exactly you are looking for. From your question I can guess that your table should not exceed more than 400px height even your total rows contains height more than 400px.
As per my understanding I would suggest you to put your table into div (having height of 400px and and overflow auto) as mentioned in below example :
<div style="max-height:400px;overflow:auto">
<table>
<tr style="height:500px">
<td>
Spider Code
</td>
</tr>
</table>
</div>
[Note: You can remove height from tr. I have put it just to indicate overflow.]
As per the above solution, if height exceeds 400px then scrollbar will be displayed.
And if you want your row height never exceed more than some pixels then set the max-height to row as mentioned below.
tr
{
max-height:20px;
overflow:hidden;
}

What ever you set in tr's height in javascript it is meaning less if it exist the max-height. so give max-height property to your tr which will restrict you tr to grow more than max-height.

use css max-height property for the table
tr{
max-height: 20px;
overflow:hidden;
}
table{
max-height:400px;
overflow:hidden;
}