I have these HAML (A) and Sass (B) files ( using i. compass and ii. ceaser-easing-0.2 in the background ).

As per this example, I want to animate ( horizontally expand / shrink ) the left pane, and have the right pane resize automatically.

I've set my parent container with these styles { display: box; box-orient: horizontal; } . And the child divs have 'box-flex' and easing 'transiti开发者_运维问答ons'. But the right pane isn't resizing.

I'm wondering what else I have to put in there?

Thanks

A)

    %html{ :lang => "en" } 

      %head
        %meta{ :charset => "utf-8" }
        %link{ :rel => "stylesheet", :href => "css/1140.css", :type => "text/css", :media => "screen" }
        %link{ :rel => "stylesheet", :href => "css/styles.css", :type => "text/css", :media => "screen" }
        %link{ :rel => "stylesheet", :href => "css/thing.css", :type => "text/css", :media => "screen" }

        %link{ :rel => "stylesheet", :href => "css/screen.css", :type => "text/css", :media => "screen, projection" }
        %link{ :rel => "stylesheet", :href => "css/print.css", :type => "text/css", :media => "print" }
        // [if IE]
        //  
        // [endif]

        %script{ :type => "text/javascript", :src => "js/css3-mediaqueries.js" }
        %script{ :type => "text/javascript", :src => "js/jquery-1.6.3.js" }
        :javascript
          $(document).ready(function() {
            $(".left-col").click(function() {
              console.log("right-col clicked");
              $(".left-col").toggleClass("closed");
            });
          }); 

      %body 
        .container
          .header Header
          .main-content 
            .left-col.debug Left Panel
            .right-col.debug Right Panel
        .footer Footer

B)

    @import "compass/layout"
    @import "compass/layout/stretching"
    @import "compass/css3/box"
    @import "ceaser-easing"

    $header-height : 50px
    $footer-height : 150px
    $left-col-width : 250px
    @include sticky-footer( $footer-height , "#container", "#left-col", "#footer")

    html, body
      min-height: 400px 
      min-width: 800px
      height: 100%

    .header
      background: #999
      height: $header-height
      box-shadow: 0 4px 6px #543

    .footer 
      background: #fdd 
      clear: both
      z-index: 10
      height: $footer-height

    .container
      padding: 0px
      width: 100%
      min-height: 100% 
      margin: 0 auto -150px

    .main-content
      @include display-box
      @include box-orient(horizontal)

    .left-col
      width: $left-col-width
      @extend .stretched
      +stretch-y( $offset-top: $header-height, $offset-bottom: $footer-height )
      @include box-flex(1)
      @include ceaser-transition(easeInOutExpo, width, 500ms, 0s)

    .left-col.closed
      width: 500px

    .right-col
      @extend .stretched
      @include box-flex(1)
      +stretch( $offset-top : $header-height, $offset-left : $left-col-width, $offset-bottom : $footer-height )

    .debug
      border-style: solid
      border-width: 1px

It seems that you shouldn't be applying position: absolute on children of box-flex, as this prevents them from "pushing" each other when they change size.

The workaround would be applying position: absolute on .main-content instead and positioning from there:

.main-content
  @include display-box
  @include box-orient(horizontal)
  +stretch-y( $offset-top: $header-height, $offset-bottom: $footer-height )

.left-col
  width: $left-col-width
  @extend .stretched
  @include box-flex(1)
  @include ceaser-transition(easeInOutExpo, width, 500ms, 0s)

.left-col.closed
  width: 500px

.right-col
  @extend .stretched
  @include box-flex(1)

You can check it here in action: http://jsfiddle.net/yMjH6/