Question

我有一个父容器，它具有（先验未知）数量的具有最小宽度的子项。当我将浏览器的大小调整到超过儿童缩小的程度时，父背景会随窗口缩小，并且不会覆盖孩子。

var myApp = angular.module('myApp', ['highcharts-ng']);
myApp.controller('myctrl', BindingCode);
myApp.factory("Factory", Factory);

function ipo() {
    this.chartConfig = {
        rangeSelector: {
            selected: 4
        },

        yAxis: {
            labels: {
                formatter: function () {
                    return (this.value > 0 ? ' + ' : '') + this.value + '%';
                }
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }]
        },

        plotOptions: {
            series: {
                compare: 'percent'
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2
        },

        series: [{
            name: 'IPO',
            data: [[1381881600000, 20.34], [1381968000000, 20.43], [1382054400000, 20.72]]
        }, {
            name: 'SPX',
            data: [[1381881600000, 1721.54], [1381968000000, 1733.15], [1382054400000, 1744.5]]
        }]
    }
}

function BindingCode($scope,Factory) {
    $scope.ipo = Factory.CreateChart();
    $scope.ipo = $scope.ipo.chartConfig;
}

function Factory() {
    return {
        CreateChart: function () {
            return new ipo();
        }
    }
}

.row{
    display:flex;
    background-color:#fcc;
    background-size:cover;
}
.row:nth-child(odd){
    background-color:#fbb;
}
.child{
    min-width:150px;
    border:1px #ccc solid;
    flex-grow:1;
}

jsfiddle

我如何确保家长背景涵盖所有孩子？

我尝试将<div class="row"> <div class="child"> content </div> <div class="child"> content </div> <div class="child"> content </div> </div> ，width:100%放在background-size:cover元素上。还尝试将所有内容包装在容器中并在其上设置.row。

我可以解决它的唯一方法是将overflow:auto放在.row元素上，但是它会使每一行都可以水平滚动而不受其他行的影响。

我已经看过this帖子了，但这并不是我需要的东西 - 我没有包装任何弹性项目，重点是让他们保持原样。

我还阅读了this文章，但我看不到任何有助于解决问题的内容。

Answer 1

您可能需要display: inline-flex;

检查： https://jsfiddle.net/n5s3n3g8/1/

Flexbox背景不会覆盖水平溢出的儿童

1 个答案: