Develop Reference

Animating Width of Flexbox Parent Doesn't Affect Children?

I'm trying to use TweenLite to tween in the width of the blue sidebar down to zero. Unfortunately, the content of the blue sidebar breaks outside of the bounds of the parent.
This is something that really should never happen with Flexbox, but the child elements are also Flex containers so I'm sure what I'm doing wrong here. :( If anyone has any suggestions please let me know. Thanks!
Here a link tot he live demo: https://jimtheman.github.io/Flexbox-Push-Drawer-Example/#/
And here you can read the source code: https://github.com/JimTheMan/Flexbox-Push-Drawer-Example/tree/gh-pages
ps. Id like to get this working, but I'm wordering if there is a way to get the center green piece to stretch to fill the container as the blue column shrinks without using Flexbox.

Setting overflow:hidden on the `.whole-app-container' element solved my problem.

'Skips' when using Bootstrap's Affix

I'm attempting to use Bootstraps Affix function in a sticky subnav.
<div class="container" data-spy="affix" data-offset-top="417" id="subnav">
I've dialed the offset so that there's no "skip" or "jump" when the subnav snaps into place. The problem I'm having is that the content below the subnav is jumping up the page, under the nav/subnav, because the subnav is changing from relative to fixed and it loses it's computed height.
Is there a way to counteract this? My initial though its to add/remove a class to the next div that adds in the correct padding or margin.
Here's a jsfiddle to help illustrate the problem. Pay attention to the H2 as you scroll.

I've taken a look at this.
When the 2nd scrolling nav-bar is .affixed, it takes on a position:fixed, and the subsequent div readjusts up into the space where it was, causing the flicker.
I tried listening to affixed.bs.affix without luck, but that's the route I'd check out. See http://getbootstrap.com/javascript/#affix-events.
It should generally be something like:
$("#subnav").on("affixed.bs.affix", function() {
// Adjust the next div here. Add a top margin
});

Can I expand a div so the overflow-y:auto scrollbar doesn't clip the div content?

Similar question, without a great answer:
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?
I have a <div> of fixed height that acts as a menu of buttons of uniform width. Users can add/remove buttons from the menu. When there are more buttons than can fit vertically in the <div>, I want it to become scrollable - so I'm using overflow-y:auto, which indeed adds a scrollbar when the content is too large in y. Unfortunately, when the scrollbar shows up it overlaps the menu buttons, and adds a horizontal scroll bar as a result - the big problem is it just looks horrible.
Is there a "right" way to fix this? I'd love to learn some style trick to make it work right (i.e. the scrollbar sits outside the div rather than inside, or the div automatically expands to accommodate the scroll bar when necessary). If javascript is necessary, that's fine - I'm already using jQuery - in that case, what are the right events are to detect the scrollbar being added/removed, and how do I make sure to use the correct width in a cross-browser/cross-style way?
JSFiddle: http://jsfiddle.net/vAsdJ/
HTML:
<button type="button" id="add">Add a button!</button>
<div id="menu">
</div>
CSS:
#menu{
background:grey;
height:150px;
overflow-y:auto;
float:left;
}
Script:
$('#add').button().click(function(){
var d = $('<div/>');
var b = $('<button type="button">Test</button>');
d.appendTo($('#menu'));
b.button().appendTo(d);
});

First: To remove the horizontal scrollbar set overflow-x: hidden; as Trent Stewart has already mentioned in another answer.
CSS Approach:
One thing I have done in the past is to add a wider wrapping div around the content div to make room for the scrollbar. This, however, only works if your container width is fixed... and may need to be adjusted (by serving different styles) in various browsers due to variable rendering of scrollbars.
Here a jsfiddle for your case. Note the new wrapper <div id="menu-wrap"> and its fixed width width: 95px;. In this case the wrapper div is doing the scrolling.
You could probably also solve this by giving the wrapper some padding on the right, and thereby avoid the fixed width problem.
jQuery Approach:
Another option is to detect the overflow using jquery as described here, and then increasing the width or padding of the div to make space. You may still have to make browser-specific adjustments though.
Here a jsfiddle with a simplified version for your example. This uses your click function to check the div height after every click, and then adds some padding to make room for the scrollbar; a basic comparison between innerHeight and scrollHeight:
if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
$('#menu').css( "padding", "0 15px 0 0" );
}
To make this more cross-browser friendly you could check for the scrollbar width (as outlined here) and then add the returned value instead of the fixed padding. Here another jsfiddle to demonstrate.
There are probably many other methods, but this is how I would go about it.

Have you tried simply using overflow-x: visible; or hidden

position:fixed for a floated div

I have a div that is floated left in a wrapper container. Now I want the div to stay in one spot when the page is scrolled. So I tried position:fixed, but this ruins the other css properties of the div.
I've tried using javascript aswell:
$(window).scroll(function () {
$("#id").css({'top',$(window).scrollTop() + 'px'});
});
That javascript isn't doing anything. Is there any other way to do this, I still want to keep the float:left property intact.
Thanks

See all the elements with different position attributes form different layers. So you have to adjust other elements when you keep this element 'position:fixed'
You have to keep empty space for this div forever, and it will stay fixed there even when you scroll your page.
See this link for better understanding
http://davidwalsh.name/demo/css-fixed-position.php

Change CSS width using javascript (JQuery Tools Scrollable) center

I am using JQuery Tools Scrollable to build a full-page-width scrollable form, such that each page of the form scrolls all the way across the page, replaced by the next page sliding in from the right.
The problem I'm having is how to center each page such that it stays centered amidst browser resizing and in-browser zooming (Ctrl +/-). My code is based upon: http://flowplayer.org/tools/demos/scrollable/site-navigation.html
I've tried encasing my code in a div like this:
<div style="margin-left:-440px; padding-left:50%; width:50%; min-width:880px;">
But, because this div is itself positioned in the middle of the page, the scrolling pages don't slide all the way to the left edge - they cut out at the div's edge about 30% away from left, which looks bad.
The only conclusion I can think of is to dynamically alter the margin-left I've defined on div class="items" to make sure it's always equal to 50% - 440px but no less than 0.
How can I do this using javascript?

is the container div absolute or relative positioned? If it has a specific width, let's say "800px", then centering it horizontally is easy with auto margins on left and right, e.g. margin: 0 auto. Otherwise it gets tricker.
If you want to respond to resize in Javascript, in jquery I do something like $(window).resize(function() {}) (docs here) and inside of the handler function update some value in CSS. If you just want to increase the width but still have auto-margins, you could select your div and update the width property, e.g. $('.mydiv').css('width', '900px');. This would fire any time the window is resized.