Javascript 当一行中有长内容时，无法获取该行中的div

我一排有两个div，左右浮动。当其中一个获得长内容时，它会溢出另一个。我希望它与第二个div有关，当它没有足够的空间时，得到几行，当第一个div的高度变大时，让我的第二个div垂直居中

.item{
背景：白色；
宽度：91%；
保证金：10px自动0；
填充：14px；
边界半径：5px；
盒影：0.5px 0 0#ffffff插图，0 1px 2px 0#B3；
字体大小：14px；
颜色：#4242；
溢出：自动；
}
.内容容器{
浮动：左；
背景：黄色；
}
.按钮{
浮动：对；
背景：绿色；
}

买杂货

您可以设置文本容器的最大宽度。确保在p标签中使用中断字

   .content-container {
      float: left;
      background: yellow;
      max-width: calc(100% - 80px);
    }

.content-container p{
  word-wrap: break-word;
}

.item{
背景：白色；
宽度：91%；
保证金：10px自动0；
填充：14px；
边界半径：5px；
盒影：0.5px 0 0#ffffff插图，0 1px 2px 0#B3；
字体大小：14px；
颜色：#4242；
溢出：自动；
}
.内容容器{
浮动：左；
背景：黄色；
最大宽度：计算（100%-80px）；
}
.内容容器p{
单词包装：打断单词；
}
.按钮{
浮动：对；
背景：绿色；
}

购买杂货

使用flexbox

例如，将第一个弹性项目宽度设置为

90%

，将第二个弹性项目设置为

10%

。为第二个flex项设置一个min宽度（两个按钮的宽度），使按钮不会堆叠

例子

.flex{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
}
.项目{
背景：白色；
保证金：10px自动0；
填充：14px；
边界半径：5px；
-webkit盒阴影：0.5px 0 0#ffffff插图，0 1px 2px 0#B3；
盒影：0.5px 0 0#ffffff插图，0 1px 2px 0#B3；
字体大小：14px；
颜色：#4242；
溢出：自动；
}
.项目>分区：第n个子项（1）{
背景：黄色；
宽度：90%；
}
.项目>分区：第n个子项（2）{
背景：黄色；
最小宽度：40px；
左侧填充：5px；
宽度：10%；
文本对齐：居中；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
}

非常长的文本非常长的文本非常长的文本Lorem ipsum Door sit amet，Concertetur Adipising Elite。是的，全方位的实践，是的，是的，是的，是的，是的，是的，是的，是的，是的，是的，是的，是的，是的，是的，是的，是的？Dolores voluptatem减去sit aperiam
身体加速。

.item{
显示器：flex；
证明内容：之间的空间；
背景：白色；
宽度：91%；
保证金：10px自动0；
填充：14px；
边界半径：5px；
盒影：0.5px 0 0#ffffff插图，0 1px 2px 0#B3；
字体大小：14px；
颜色：#4242；
溢出：自动；
}
.内容容器{
背景：黄色；
}
.按钮{
背景：绿色；
}

购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物购物

Fiddle、CodePen或snippet会有帮助。您的代码似乎有问题。然而，我们不能帮助，除非我们有。否则，我们只是盲目猜测。对不起，我的错，忘了添加代码，我怎么能垂直居中第二个div？你试过了吗？所有浏览器都支持该属性吗？