Develop Reference

Margin being added to div element when changing it's width within react-modal

I have a react-modal with a div inside. Inside the div, I have a component which is essentially just another div with some divs/buttons inside. If I remove all styling form my code, my component will take up 100% of the modal.
However if I change my component to have the style {width : 50%}, my component only takes up 50% of the width as expected, but I get a margin to the right that takes up the other 50%. I've tried everything I can think of including wrapping it in another div, setting the margin to 0 etc.
How can I investigate this?

Create Scrollable Div for Angular Chat

I am creating a chat application in Angular and I am trying to set up the UI for it. I need to create a div that will be housing the chat messages and as more messages fill the div I do not want the div to expand but just stay the same size and show a scroll bar. This div should be 100% the size of the parent div. As you click the button to add data the div grows. Even if I set a height in px or percent format the div still grows.

The page you link won't load but here are the basics to make a scrollable element:
HTML / JS Structure
Make an outer container div
Make an inner container div (this will be the "scroll wrapper")
Append the inner container to the outer container
Insert whatever you need into the inner container (you can use something like insertAdjacentHtml or whatever works for your specific situation)
This order of steps in particular will work well for a scenario where the contents are dynamically changing.
CSS
For the outer container
Set a fixed value for width and set height: auto
Set a border-radius if you want circular edges
Set overflow: hidden to keep the scroll wrapper's corners from popping out
You will probably want some padding
For the inner container
Set position: relative
Set overflow-y: auto and overflow-x: hidden so that you can scroll up and down, but not side to side
For the desired overflow behavior, you need to set width: 100% and set fixed values for max-height and min-height. (max-height decides when things will start to overflow ie. make a scroll bar)
You will want max-height and min-height to be less than the outer container's fixed width + any padding, etc. it may have.

set margin around child div when parent's width is set using javascript

The site I am working on: https://tricycle-203819.appspot.com/
I would like to replicate the effect on this site where there's multiple sections, and the child divs have margins around the sections: https://www.newyorker.com/
On my site, the div container-spice's width and margin to the left and right is set using javascript on load, and on window size. I would like the children of left-container, which is a child of container-spice, to have a margin on the right that is of some constant pixel.
Changing the padding-right and margin-right property of left-container do not achieve this effect. I would like to avoid changing the properties of the children of left-container if possible, since they will be reused elsewhere.

The reason margin-right on left-container doesn't work is because the right-container won't respect the margin, since it has a position of fixed. You can however add a padding-right to left-container to achieve your desired affect of creating a gap between the two containers.

Create nav menu one nav item is taller than container's height

I have a navigation (Sample Wireframe) which has a colored background. The nav items are in a list, and at different resolutions. As the font size changes the nav container's height also expands or contracts. However, I want one of these items (the middle one) to have a larger height and break the bounds of the container.
Is the cleanest way to do this to set the height of the container to be equal to the height of the other buttons using javascript, or will that still always cut off the larger nav item? I can't seem to break out one of the items from the bounds of the container without doing absolute positioning which completely takes it out of the flow of the other list items, and I want the height of the container to stay consistent with the rest of the buttons. Any thoughts?

Create the item with position:absolute set as a style property.
You may need to create another element next to it with the regular height that will be hidden behind it to keep the width reserved.

position:absolute
will do the trick but also consider about having an extra div (nested div) so it isolates from the bigger item.

As others said, position: absolute. It is important to note that an absolutely positioned element will have its origin point at the nearest element with position: relative (or the root element), so if you set the parent container to relative, the absolute menu item will start there.

Set child element width to parent div

I'm having a parent div and inside that child element will be table.
I'm hidding some columns in the table through CSS to avoid inline-style.
So how can I reflect the width to parent div after hiding the column of table...

$("#yourtableid").width();
returns the computed pixel width of the table element with id yourtableid.
$("#yourdivid").width ( $("#yourtableid").width() );
will set the parent div width.
See
CSS/width

Maybe you'll need to use jQuery innerWidth() method (calculates elements width with padding without calculating border width) and outerWidth() (calculates elements width with padding and border size included).
If you supply optional boolean argument to outerWidth() (eg : outerWidth(true)), it'll include also size of margins.
So in this case your code will be
$("#yourdivid").width($("#yourtableid").innerWidth());