We Keep Coding

how to apply overflow:hidden for children of children with absolute positioning [duplicate]

We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV.
#first {
width: 200px;
height: 200px;
background-color: green;
overflow: hidden;
}
#second {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 250px;
top: 250px;
}
<div id="first">
<div id="second"></div>
<div id="third"></div>
</div>
Is there any chance to make the inner DIV obey the overflow hidden of the outer DIV without setting the outer DIV to position absolute (cause that will muck up our complete layout)?
Also position relative for our inner DIV isn't an option as we need to "grow out" of a table TD.
#first {
width: 200px;
height: 200px;
background-color: green;
}
#second {
width: 50px;
height: 400px;
background-color: red;
position: relative;
left: 0px;
top: 0px;
}
<table id="first">
<tr>
<td>
<div id="second"></div>
</td>
</tr>
</table>
Are there any other options?

Make outer <div> to position: relative and inner <div> to position: absolute. It should work for you.

What about position: relative for the outer div? In the example that hides the inner one. It also won't move it in its layout since you don't specify a top or left.

An absolutely positioned element is actually positioned regarding a relative parent, or the nearest found relative parent. So the element with overflow: hidden should be between relative and absolute positioned elements:
<div class="relative-parent">
<div class="hiding-parent">
<div class="child"></div>
</div>
</div>
.relative-parent {
position:relative;
}
.hiding-parent {
overflow:hidden;
}
.child {
position:absolute;
}

Make sure.
parent position relative.
parent have manually assigned width and height(important as child element having absolute position).
child position absolute;
.outer{
position:relative;
width:200px;
height:100px;
overflow:hidden;
}
.inner{
position:absolute;
width:100px;
height:100px;
font-size:3rem;
}
<div class="outer">
<div class=inner>
Inner DIV to apply overflw hidden
</div>
</div>
}

You just make divs like this:
<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
<br/>
<div style="position:inherit; width: 200px; height:200px; background:yellow;">
<br/>
<div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
<br/>
</div>
</div>
</div>
I hope this code will help you :)

javasript in angular 8

There's a solution on js -
codepen.io/skovtun/pen/VwLvXPB
Can't make an analog for Angular8+.
I need the center block to have a fixed width (1200px), and it is evaluated and compressed by the left, right and both sidebars immediately when they are opened. They should not overlap with the content.

I seen content overlapping when closing sidebars. May be you want to stop overlapping during open and close sidebar. It can be fixed by css. You can use transition in .wrapper class. see bellow code:
.wrapper{
height: 100%;
transition:all .25s;
}

You can achieve this with pure CSS.
You haven't specified what the requirements are, but you can use flexbox like the below example to achieve a max-width main container flanked by 2 compressing sidebars.
body {
margin: 0;
}
.wrapper{
display: flex;
}
main {
width: 1200px;
padding: 20px;
background-color: #f1f1f1;
}
.sidebar {
flex-grow: 1;
height: 100vh;
padding: 0 15px;
}
.sidebar-left {
border-right: 1px solid #06A52B;
}
.sidebar-right {
border-left: 1px solid #06A52B;
}
<div class="wrapper">
<aside class="sidebar sidebar-left">
<h2>Left sidebar</h2>
<p>Add content here</p>
</aside>
<main>
<h1>Max width of this block is 1200px</h1>
</main>
<aside class="sidebar sidebar-right">
<h2>Right sidebar</h2>
<p>Add content here</p>
</aside>
</div>

You Can Dynamic every css class Using [ngClass] Depending on your logic ..it will render when the value will change..

Can Flexbox help me?

I have inherited somebody else's problem. The HTML is all DIVs with floats, displays and positioning tweaks. The one thing I cannot change is the structured of the HTML DIVs. Nor do I wish to add any new javascript libraries. But I can add all the CSS I need to the existing DIVs.
Currently 3 DIVs are embedded as:
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow">
<DIV> 2 </DIV>
<DIV> 3 </DIV>
</DIV>
Take a look at the graphic below. The problem with this is that as DIV1 grows down, the DIV3 gets bumped down. I wish to keep DIV3 fully justified from the top to bottom (as if STRETCH).
Without getting into how the current code combines DISPLAYS, FLOATS, and POSITIONING -- I think I need to erase all the CSS and replace with some FLEXBOX. But I cannot seem to get the right combination of FLEX properties to make DIV3 behave to stretch (instead of getting bumped down).
Fortunately, this only has to work for Chrome on Desktop (no mobile nor other browsers).

There you go IF width of div 3 is known and fixed value:
https://codepen.io/AugustinF/pen/qYBpmR
.wrapper {
position: relative;
border: 2px solid black;
}
#firstrow {
height: 100px;
margin-right: 200px;
background: green;
}
#secondrow {
}
#div2 {
float:left;
background: blue;
}
#div3 {
width: 200px;
position: absolute;
top:0;
right:0;
height: 100%;
background: red;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
HTML:
<div class="wrapper clearfix">
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow clearfix">
<DIV id="div2"> 2 </DIV>
<DIV id="div3"> 3 </DIV>
</DIV>
</div>
Using #Pete solution you can modify the HTML structure using javascript by placing this code at the end of the body tag:
<script>
document.getElementById('firstrow').appendChild(
document.getElementById('div2')
);
</script>

have nested div fill up area within parent div

Been looking all over stack for answers and nothing fits my specific scenario:
I have a parent div and within that I have two child divs aligned horizontally next to each other. I want to pretty much fill up all that extra space in the parent div (shown in purple color). I want to take the div in red and pull it up and down to fill the parent so that column background is all red and similarly, the right div fills up and down and the background for that entire fills up to be blue. Below is my div structure
<div class="container">
<div id="parent" class="btn row-height" style="width:100%; margin:0%; margin-top:5%; padding-top:10%; padding-bottom:10%; border-solid:1px; border-radius:10px; background:#d3d3e5; overflow:hidden" type="submit">
<div class="row">
<div class="col-height col-middle col-xs-4 pull-left card" style="background-color:red">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">TEXT</h3>\
</div>
</div>
<div class="col-height col-middle col-xs-8 pull-right card" style="background-color:blue;">
<div class="col-xs-12 text-center">
<h4>TEXT</h4>
<p>TEXT</p>
</div>
</div>
</div>
</div>
</div>
To make it clearer: I want my final thing to look like this:

I think you might be looking for something like this.
.container {
height:500px;
}
.container #parent {
height:100%;
}
.container #parent .row {
height:100%;
position: relative;
}
.container #parent .row #child-left {
height: 100%;
width:30%;
background-color: blue;
float:left;
}
.container #parent .row #child-right {
height: 100%;
width:70%;
background-color: yellow;
float: right;
}
I am not sure what styles .container, #parent and row have, so I included what could possibly be their styles. But the meat of the of the answer/solution here is the last two blocks of the styles. The idea is that both children of the parent must have 100% height of whatever is containing them.
Check demo here: https://jsfiddle.net/an6t1yj3/
In case you can't, this is the output of the fiddle:

You display: table values.
<style>
#parent {background: purple; overflow: hidden;}
.row {display: table; height: 300px; width: 100%}
.row > div {display: table-cell; text-align: center; vertical-align: middle;}
#child-left {background: red; width: 40%;}
#child-right {background: blue; width: 60%;}
</style>
<div class="container">
<div id="parent">
<div class="row">
<div id="child-left" class="pull-left">left<br>left</div>
<div id="child-right" class="pull-right">right<br>right<br>right</div>
</div>
<div>
<div>
https://jsfiddle.net/mj87kucy/

Fill remaining space if other element display none

I have a div with other 3 divs inside.
<div id="buttons">
<div id="button1"></div>
<div id="button2"></div>
<div id="button3"></div>
</div>
The width of the main div (buttons) is 100%. If my 3 buttons are visible the width of each button will be 33%, if 2 are visible will be 50% and if only one so 100% the same of the parent...
I know how to modify this values with javascript... but its possible modify only with javascript the display and css modify the width
SORRY BY MY ENGLISH

You can achieve that layout using table & table-cell props, OR via flexbox (or maybe some other methods, but these ones come in mind atm).
Both these methods have pros & cons, but depending on what you're going with you're layout, these should help you out.
According to http://caniuse.com/, flexbox doesnt go to well with older browsers, mainly IE9 and bellow that, check it out: http://caniuse.com/#search=flex
As for the table trick, it has a much better support with older browsers, http://caniuse.com/#search=table, but it has its own little quirks depending on what you want to accomplish using this.
Option 1 - Table Trick:
set the container to display: table & width: yourwidth;
set the children of the container to display: table-cell, this rule will make sure theyll stretch evenly across their parent
done.
View demo here or snippet bellow:
/*option 1*/
.buttons {
display: table;
width: 100%;
}
.buttons > div {
display: table-cell;
}
/*styling purposes*/
.buttons{
margin: 10px 0;
text-align: center;
}
#button1{
background: red;
}
#button2{
background: green;
}
#button3{
background: cyan;
}
<h1>Table trick</h1>
<div class="buttons">
<div id="button1">1</div>
<div id="button2">2</div>
<div id="button3">3</div>
</div>
<div class="buttons">
<div id="button1">1</div>
<div id="button2">2</div>
</div>
<div class="buttons">
<div id="button3">3</div>
</div>
Option 2 - Flexbox:
set the container to display: flex
set the childrent to flex: 1 100% so that theyll stretch evenly across their parent
View demo here or snippet bellow:
.buttons-flex {
display: flex;
}
.buttons-flex > div {
flex: 1 100%;
}
/*styling purposes*/
.buttons-flex {
margin: 10px 0;
text-align: center;
}
#button4 {
background: red;
}
#button5 {
background: green;
}
#button6 {
background: cyan;
}
<h1>Flexbox trick</h1>
<div class="buttons-flex">
<div id="button4">1</div>
<div id="button5">2</div>
<div id="button6">3</div>
</div>
<div class="buttons-flex">
<div id="button4">1</div>
<div id="button5">2</div>
</div>
<div class="buttons-flex">
<div id="button6">3</div>
</div>
Hope this help you out!

Try using the following CSS...
<style type="text/css">
#buttons
{
width:100%;
display:table;
}
#button1
{
background:red;
width:34%;
display:table-cell;
}
#button2
{
background:green;
width:34%;
display:table-cell;
}
#button3
{
background:blue;
width:34%;
display:table-cell;
}
</style>
As the buttons are hidden, the remaining buttons take up the remaining space of the #buttons container.
Think of this as displaying a set of tds in a table