Question

所以这个问题让我抓狂了。我有一个fiddle，代码的工作方式完全符合我的预期。

但是我有类似的代码实现here，你会看到因为我有更多的文本导致第一个flex项的宽度自我调整。

我还是刚开始使用flexbox，但我一直在对它们进行一些阅读，也许我在CSS中出了点问题？我不知道小提琴是如何起作用的，但真实的例子却没有。

CSS

.comment-meta-body {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 30px 0;
    border-bottom: 1px solid #eee;
}
.comment-meta-text {
    font-size: 12px;
    line-height: 20px;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

修改 70px的flex-basis似乎使它工作，但我仍然不明白实际例子中发生了什么，在小提琴中我试图设置宽度到父容器试图复制它但我不能。小提琴完美无缺。在实例中进行一些测试，如果我在

标签上设置的最大宽度小于容器的宽度，让我们说100px，它看起来也很好。

Answer 1

在网络上，你有这张图片的css：

img {
    width: 100%;
    height: auto;
}

在小提琴中你没有，图像使用原始大小。

Flexbox项目的高度会影响另一个项目的宽度

1 个答案: