We Keep Coding

React element not expanding correctly in CSS Flex container

I am attempting to utilize the IBM Gantt Chart Component in a React application.
The goal is to get the gantt chart component to span the entire page as seen below:
In my JS source code, I have the following line:
return(
<div id="ganttDiv">
<GanttChart config={config} />
</div>
);
In my CSS, I set the width to 100% and the height to 100vh. I also put thick borders to determine the extents of the div.
#ganttDiv{
width: 100%;
height: 100vh;
border-color: rgb(102, 255, 0);
border-style: dashed;
border-width: 15px;
background-color: rgb(255, 255, 255);
}
Instead of the React element spanning the entire page, I get:
As you can see, the div correctly fills the entire page as shown with the green borders, but the contents of the div don't expand to fill the space.
After researching and looking around for several hours, I learned that I could use flex boxes.
Therefore, I added display: flex; to my CSS, and now the height looks correct:
Unfortunately, the width now shrinks to less than half of the page instead of being 100% width from before.
I tried following the examples provided by MDN Web Docs and tried setting the CSS to row, row-reverse, column, and column-reverse which does not work.
It seems like I can only get it to span the entire width or span the entire height, but not both.
I hope that someone can help. Have a nice day. :-)
Edit:
When I compile it with using 100vw as the others suggested, it doesn't do anything. However, if I edit with F12 developer tools the imported component itself (not the div), it works. On the sidebar, it says that the component is only inheriting color from the div, nothing else. So what should I do?

To fix the problem, it was necessary to apply the width to the component itself, not the div. Unfortunately, the syntax for doing this with React is different since we use JSX instead of HTML.
Therefore, to the fix the problem I had to do:
return(
<div id="ganttDiv" >
<GanttChart config={config} style={{width: '100vw'}} />
</div>
);

Text content overflow its element tag

Here's the code. It's in Angular if that has something to do with it. The actual text height is overflowing the element that contains it.
#website-title {
text-align: center;
// font-family: "Roboto-Mono";
font-size: 50px;
margin: 0;
position: absolute;
top: 50%;
}
<p id="website-title">Poll App</p>
result:
I want the element to be the height of the content.
UPDATE: Narrowed the problem down to Angular Material. Everything is fine before doing ng add #angular/material. Then after adding material and restarting the server, I get the problem.

Be default, the p tag will expand to fit its content. So unless you have explicitly set the p tag height to be smaller than the text content, the text will not overflow.
Try checking to see if you have set a height on the p tag.

I found the solution but I don't know why it fixes the problem.
The problem had to do with Angular Material's typography (Angular material was installed). Sol'n - Go to index.html and remove the class="mat-typography" from the body tag.

How to check if 2 elements displayed on the same row?

Assuming I have 2 elements on a responsive design like this:
<div id="container">
<div class="first"></div>
<div class="second"></div>
</div>
both of them with style contains:
width: auto;
display: inline-block;
float: left;
And because I'm expecting different screen sizes to view page, so, according to screen size, sometimes they will be rendered/displayed on the same row, and sometimes they will not!, the second DIV will be moved to a separate row.
So, I'm wondering, how can I check if they are on the same line with JavaScript?
Thank you

"on the same line" would require inline elements or floating block elements of the exact same height. DIVs are block elements by default. So either use <span> tags instead of <div>, or add display: inline-block;to the CSS rule of those DIVs
ADDITION after EDIT OF QUESTION:
width: auto for a <div> means 100% of the parent element (in this case full width). As I wrote: If you have blocks, use display: inline-block; in their CSS. If you want them to have the same height, put them into a common container DIV (which you already have) and apply the following CSS:
#container {
display: table;
}
.first, .second {
display: table-cell;
width: 50%;
}
Aha (edited question), Javascript: Well, read out the DIV widths, add them and compare the result to the (read-out) container width.

You can use the element bounding boxes and check for overlap:
var rect1 = $('.first')[0].getBoundingClientRect();
var rect2 = $('.second')[0].getBoundingClientRect();
var overlaps = rect1.top <= rect2.bottom && rect2.top <= rect1.bottom;
This checks for any overlap which will probably be sufficient for your use. I used jQuery to get the elements but you can use pure js in the same way, it would just be a bit more verbose.

There is no concept of line on a page. You can check the x and y position of any element in the window and then decide if that meets whatever criteria you have for "on the same line".
By default, a div is the full width of a window so the two divs inside your container in this HTML:
<div id="container">
<div class="first"></div>
<div class="second"></div>
</div>
will be one above the other unless there is some other CSS you have not disclosed that controls the layout to allow them to be in the same row. If they are indeed width: auto and don't have any other layout rules affecting this, then they will each be full width and thus first will be above second in the layout stream. They would never be "on the same line" by any typical definition of that phrase.
Feel free to try it out here: https://jsfiddle.net/jfriend00/y0k7hLr8/ by resizing the right pane to any width you want. In all cases, the first will stay on top of the second.
If, on the other hand, you allow the div elements to have a different type of layout such as let them be display: inline-block and define a width for them, then the layout engine will fit as many on a given row as possible like here: https://jsfiddle.net/jfriend00/229rs97p/

Something tells me display: flex might help you in this. Read https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more info.

Have table inside div ignore max-width?

I have the following code:
<div style="max-width: 100px; overflow: scroll">
<table>...</table>
</div>
I want to limit the size of the div, but have the table stretch as far as it wants (i.e. ignoring the max-width attribute of the parent div. How do you do this? Currently the browser resizes the table in attempt to follow the max-width...

In CSS file:
div {
overflow: visible;
}
You can't use the position: absolute; for the table element because it doesn't ignore the div...the div ignores IT. If you don't have something filling up the div underneath the table it will not show at all.
PS - I said to put in the CSS file on purpose. I see he has it in his HTML but you should rarely put CSS styles in HTML files. Using a .css centralizes and standardizes across the site and all that has to be set are classes and ids.

Set the position of the table to absolute, then it will not be constrained by the parent div
<div style="max-width: 100px; overflow: scroll">
<table style="position:absolute;">...</table>
</div>

how scrollable text line inside a div without showing scroll bars

plz see the below link :
Long File Name Inside A Div
when you see those long file names with firebug you will find a span that tell us ->
.FileName {
float: left;
width: 438px;
}
we have predefined width for this span!
q#1 : so why we have overflow in that div and how can i fix that ?
q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?
edit
(with jquery or javascript or css)
thanks in advance

You have an overflow because this text can't break (there are no spaces):
R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210
You could change the span's into div's and give them a height and an overflow:hidden.
Html:
<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210 asangsm.com.rar</div>
Css:
.FileName{
float: left;
width: 438px;
height: 20px;
overflow: hidden;
}
I don't think it's possible to make that file name scrollable without showing scrollbars.

If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.

Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.
As per avoiding the line break, you can use white-space: nowrap;.