Question

我在弹性盒子里面有一个元素。如果柔性盒是水平的，则内部元件水平扩展以填充柔性盒。如果柔性盒是垂直的，则元件不会垂直扩展以填充柔性盒。

我找到了一些讨论这个问题的其他StackOverflow帖子，但解决方案围绕着让所有孩子都灵活，这使他们能够填充100％的高度。我正在寻找一种解决方案，让孩子们可以填充任何百分比的高度。

最简单的解决方法是应用.flex-vertical .flex-child { height: 100% }，然后一切正常，但我想了解为什么在宽度不需要时设置高度是必要的。 < / p>

以下是随附的代码：

<div class='flex flex-vertical'>
    <div class='flex-child'>
        <div class='line'>
        </div>
    </div>
</div>

<br/>

<div class='flex flex-horizontal'>
    <div class='flex-child'>
        <div class='line'>
        </div>
    </div>
</div>

<br />

<div class='flex flex-vertical'>
    <div class='flex-child fixed'>
        <div class='line'>
        </div>
    </div>
</div>

.flex {
    display: flex;
    height: 200px;
    width: 200px;
}

.flex-vertical {
    flex-direction: column;
    background-color: green;
}

.flex-horizontal {
    background-color: orange;
}

.flex-child {
    flex: 1;
}

.line {
    background-color: blue;
}

.flex-vertical .line {
    width: 5px;
    height: 66%;
}

.flex-horizontal .line {
    height: 5px;
    width: 66%;
}

.fixed {
    height: 100%;
}

请注意，我正在使用最新版本的Google Chrome浏览器，我只使用我的CSS定位最新版本的Google Chrome。我知道在其他浏览器中可能存在供应商前缀差异或不同的实现，但我只对Google Chrome感到好奇。

内容不尊重父高度与flex：垂直;

0 个答案: