Панель не изменяет размеры после ослабления / перехода

Question

У меня есть эти файлы HAML (A) и Sass (B) (используя i. Compass и ii. Ceaser-easing-0.2 на заднем плане).

В соответствии с этим примером я хочу анимировать (горизонтальное расширение / сжатие) левую панель и автоматически изменять ее размер.

Я установил родительский контейнер с этими стилями {display: box;бокс-ориентированный: горизонтальный;}И у дочерних элементов есть ' box-flex ' и замедление ' переходов '.Но правая панель не меняет размеры.

Мне интересно, что еще я должен туда вставить?

Спасибо

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

Answer 1

Кажется, что вы не должны применять position: absolute к дочерним элементам box-flex, так как это не позволяет им "толкать" друг друга при изменении размера.

Обходной путь будет применять position: absolute к .main-content вместо этого и позиционировать оттуда:

.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)

Вы можете проверить это здесь в действии: http://jsfiddle.net/yMjH6/