We Keep Coding

Resizable divs using flex-box

I have a page with 3 divs inside it, 2 of them should be resizable. All of them could be shifted left/right and could be maximized/minimized.
Here is a Stackblitz.
The problem is that sometimes the resizing is causing scrollbars to be shown when, for example, resizing the first box and dragging its handler to the right end of the screen.
Is there a way to achieve the same goal with flex box or css grid? Maybe increasing or decreasing the flexGrow depending on the mouse movement? Does this make sence?

Did you try to reset default margin and padding?
html,
body {
height: 100%;
padding: 0;
margin: 0;
}

Set height of empty div to remain static when adding content

Our form has a height problem with a div used for text feedback.
On a webpage I have a empty div with an id that has a style applied to it. Javascript is applied to the div when a user enters information into a form. Before the Javascript runs and put text into the div it has only a few pixels in height, when the Javascript adds text the div gains height and pushes the form elements under it down. The form should remain static without moving on user interaction.
With text the div is 29px high. Now I can apply the following style to the div.
height: 29px;
This solution does not seem to be safe as other browsers might render differently or someone might be using a different font size.
What is the best practice solution to setting the height of an empty div to stop it changing size when text is added?

If you set some fixed height (say... 29px) to the div it won't change size...
To better support different font-size, and/or number of lines, you can calculate that special number (29px) as the product of your font-size * line-height * numberOfLinesYouWantToAllow, and set this number as the div's height accordingly.
CSS
height: 29px;
overflow: auto;

Horizontal Overflow/Text Inside Span nested inside Div

I'm trying to build a type of ticketing system, where each ticket is a div and has other, nested divs inside of it to better accommodate content. Aside from images and other types of media, it has a plain text area where a description of the ticket will go.
Everything works as it should, but when I print the description, the text continues horizontally, never vertically. This in turn produces a horizontal overflow and the div which contains that text apparently extends beyond the 100% width (which I understand fills its parents div width) I had assigned to it.
The text is inside a span tag, which is in turn inside the description div. I'm fetching that text from a JSON I receive client side, and I'm just concatenating, i.e. :
var description = receivedJson.description;
var desDiv = '<div class="description"><span>'+description+'</span></div>';
I think part of the problem is I'm concatenating all of it in a single line. Here's a demo, but again, since it's not dynamically substituting text, it kinda works and doesn't correctly reproduce the problem.
This is what's actually happening.:
I'm getting both scrollbars, when I only want the vertical one - if-and-only-if it's needed. Even if no text is present, I get scrollbars (probably cause of the padding I have on that span tag, but then how do I get spacing between the text and the div?).
How can I get the text to display vertically and only get a vertical scrollbar when the text exceeds the div's height?

.c span {
display: inline-block;
height: 100%;
padding: 1em 2em;
background-color: red;
}
remove width:100% . this should work fine :)

How to make the text cursor in a text field start a few px in?

I am wanting a text field that has a cursor that starts a few px (say maybe 4) in from the left-hand side. I know it can be done if you make the text field to size using padding, but I wanted to know if there is any way possible without using padding to resize the text box, but using the height and width CSS.
An ideas or input would be greatly appreciated.

Use the text-indent property:
input {
text-indent:20px;
}
You can also use padding with a fixed width. This will keep the width fixed at 100px but still do your padding.
input {
padding-left: 10px;
width: 100px;
}

Truncate/increase font size within a div so it fits

Suppose I have a div of size 100px x 20px and text within it set randomly with different lengths i.e. some text sections are long and some are short.
So, when the amount of text is less, then there is blank space within the div. And if there is large amount of text, it overflows.
My objectives
If text is less than the div capacity, then the font-size of that text will maximize to fit within that div as much as possible without clipping/ cutting.
But if text size is larger than the div capacity then I want to truncate text and append ... (3 dots only).

For the first part, I'd suggest to wrap the text in a <span> so you can get its offsetWidth, then you can set its font-size style property to 200 / span.offsetWidth.
Keep in mind, though, that this is a rough calculations with some approximations being made, and maybe you want to do better using 190 or 195 instead of 200.
For the second part, just set overflow: hidden; text-overflow: ellipsis; white-space: nowrap;.
Keep in mind that the ellipsis dots don't appear in older Firefox clients.

I think you will need another (inner) <div> in order to be able to check the height of the text.
<div id="mainDiv">
<div class="inner">
<p>Some text</p>
</div>
</div>
//css
#mainDiv
{
width: 200px;
height: 50px;
overflow: hidden;
}
Then you will need some simple functions (something like this):
//pseudocode
function doCheck()
{
if (".inner".height > "#mainDiv".height) truncate()
else increaseSize()
}
function truncate()
{
for (i = 1; i <= ".inner".wordCount)
while (".inner".height <= "#mainDiv".height)
{
addOneMoreWord() + " …";
if (".inner".height > "#mainDiv".height) removeLastWord()
}
}
//similar thing for increaseSize();