Html 为什么flexbox在两个文件之间的内容空间不起作用？

我有一个评论部分，用户可以在其中输入评论，它会自动显示评论和评论输入的时间

我希望作者姓名在左边，日期在右边，并且应该使用FlexBox响应

以下是JSFIDLE：

这是我想要的

以下是我的一个片段：

。注释说明{
显示器：flex；
弯曲方向：行；
填充：23px 0px；
边框底部：2个实心#EBEBEB；
}
.评论和详细信息{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
弹性基准：100%；
利润上限：27px；
}
.comments\u包装器{
填充：32px21px；
}
.评论照片img{
边界半径：300px；
宽度：80px；
高度：80px；
位置：相对位置；
顶部：37像素；
}

迈克·罗斯
4分钟前
丁吉

为
添加注释。\u包装器
flex:auto以便将时间向右对齐

指：

.comments_wrapper {
    padding: 32px 21px;
    flex: auto; /* here I added */
}

为
.comments\u包装添加
flex:auto以便将时间向右对齐

指：

.comments_wrapper {
    padding: 32px 21px;
    flex: auto; /* here I added */
}

希望这会有所帮助

.comments_wrapper{
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
}

希望这会有所帮助

.comments_wrapper{
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
}

comments\u wrapper
选择器没有占据其余位置，这就是为什么您看不到效果。尝试以下方法：

.comments_wrapper {
    padding: 32px 21px;
    flex-grow: 1; /* Key Line */
}

comments\u wrapper
选择器没有占据其余位置，这就是为什么您看不到效果。尝试以下方法：

.comments_wrapper {
    padding: 32px 21px;
    flex-grow: 1; /* Key Line */
}

您需要设置.comments\u包装的宽度

.comments-description {
    display: flex;
    flex-direction: row;
    padding: 23px 0px;
    border-bottom: 2px solid #EBEBEB;
}

.comments_details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-basis: 100%;
    margin-top: 27px;
}

.comments_wrapper {
    padding: 32px 21px;
    width: 100%; /*add this*/
}

.comments-photo img {
    border-radius: 300px;
    width: 80px;
    height: 80px;
    position: relative;
    top: 37px;
}
.days{
margin-left: auto;
}

您需要设置.comments\u包装的宽度

.comments-description {
    display: flex;
    flex-direction: row;
    padding: 23px 0px;
    border-bottom: 2px solid #EBEBEB;
}

.comments_details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-basis: 100%;
    margin-top: 27px;
}

.comments_wrapper {
    padding: 32px 21px;
    width: 100%; /*add this*/
}

.comments-photo img {
    border-radius: 300px;
    width: 80px;
    height: 80px;
    position: relative;
    top: 37px;
}
.days{
margin-left: auto;
}

添加
flex:auto至
。注释\u包装
css

.comments_wrapper {
   padding: 32px 21px;
   flex: auto;
}


。注释说明{
显示器：flex；
弯曲方向：行；
填充：23px 0px；
边框底部：2个实心#EBEBEB；
}
.评论和详细信息{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
弹性基准：100%；
利润上限：27px；
}
.comments\u包装器{
填充：32px21px；
flex：自动；
}
.评论照片img{
边界半径：300px；
宽度：80px；
高度：80px；
位置：相对位置；
顶部：37像素；
}

迈克·罗斯
4分钟前
丁吉

添加
flex:auto至
。注释\u包装
css

.comments_wrapper {
   padding: 32px 21px;
   flex: auto;
}


。注释说明{
显示器：flex；
弯曲方向：行；
填充：23px 0px；
边框底部：2个实心#EBEBEB；
}
.评论和详细信息{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
弹性基准：100%；
利润上限：27px；
}
.comments\u包装器{
填充：32px21px；
flex：自动；
}
.评论照片img{
边界半径：300px；
宽度：80px；
高度：80px；
位置：相对位置；
顶部：37像素；
}

迈克·罗斯
4分钟前
丁吉

其他浏览器呢？其他浏览器呢？