Question

我正在尝试使用flex-box获得一致的水平滚动。

http://codepen.io/sheriffderek/pen/NABzdQ

事情进展顺利，但我做了那件事〜你忘了在Safari和FireFox中看它。那里的事情并不顺利。通常情况下，如果某些东西在web-kit中运行但不是firefox，webkit会平滑一些不正确的东西/ firefox遵循规则的地方。所以，它不是一个错误或任何东西......但是灵活的东西并没有真正扩展到他们的儿童图像。

话虽如此，我无法弄清楚哪一部分是需要改变的关键因素。

我正在使用flex-box作为标题和“内容”区域，其中内容区域增长以填充剩余空间。所以，一个全球专栏
在'content'区域中，有一个flex和row列表。在列表中，有文本或图像的项目。图像应该是列表的100％高度，然后是自动宽度。
我原本以为我可以将图像设置为100％高度和宽度自动（类似于我对小屏幕的反面） - 但效果不一样。

img { display: block; height: 100%; width: auto; }
为了解决这个问题，我使用JS来查找“内容”区域的高度，并将图像设置为该高度。

http://s.codepen.io/sheriffderek/debug/NABzdQ（没有编辑器用于测试/在iPad等上的版本。）

在Chrome中运行良好。

那么......有没有人有任何建议？我的真实项目首先是小屏幕，因此更复杂 - 但这是一个明显的例子，说明事情出了差错。

样式

ul
    list-style: none
    margin: 0
    padding: 0

body
    display: flex
    flex-direction: column
    height: 100vh // ?

.header
    // 

.section // content
    display: flex
    flex-grow: 1

.item-list
    display: flex
    flex-direction: row
    flex-grow: 1
    max-width: 100%
    overflow: auto
.item
    display: flex
    flex-grow: 1
a //
    display: block
    display: flex
.image-w
    width: auto // should stretch to fit the child / image
    max-height: 100%
    overflow: hidden //?
    img
        display: block
        width: auto
        // height to be set by JS

.text-w
    width: 400px
    padding: 1rem

脚本

var setUp = function() {
    $('.item').each( function() {
        var $this = $(this);
        // var $thisFigure = $this.find('.image-w');
        var $thisImage = $this.find('img');
        var thisHeight = $this.outerHeight();
        $thisImage.css({
            height: thisHeight
        });
    });
};

$(window).resize( setUp ).trigger('resize');

带有弹性框

样式

脚本

0 个答案: