Javascript 在具有隐藏溢出x和滚动y的子级和预览div之间均匀划分宽度

我希望

.content

垂直滚动并隐藏其水平溢出，

.preview

和

.editor

应平均共享父级的宽度

.wrap{
显示器：flex；
背景：灰色；
}
.内容{
溢出x：隐藏；
溢出y：自动；
}
.编辑文本区{
宽度：100%；
身高：100%；
调整大小：无；
}
.编辑{
弹性：1；
}
.预览{
弹性：1；
}

长内容长内容

给你带来一些坏消息：

注意：溢出属性仅适用于具有指定高度的块元素

50%的问题是由框大小和文本区域元素的默认样式引起的；它溢出了它的

.editor

容器，使它看起来大于50%

下面是一些代码，我相信您正在尝试执行这些操作：

.wrap{
显示器：flex；
背景：灰色；
}
.内容{
溢出x：隐藏；
溢出y：自动；
/*如果不指定高度，在使用overflow-y:auto时，内容将永远不会垂直滚动，因为否则它将继续增长到其内容的高度*/
最大高度：150像素；
}
.编辑文本区{
宽度：100%；
身高：100%；
调整大小：无；
框大小：边框框；/*防止在其父框之外绘制*/
}
/*在不强制50%宽度的情况下，flex将允许容器的内容增长到其内容的大小。试着带/不带*/
.editor、.preview{width:50%}
.编辑{
弹性：1；
}
.预览{
弹性：1；
}

此内容为豆腐X长内容长内容长内容长内容长内容长内容长内容长内容长内容
此内容可包装和滚动
Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克发酵剂。在休息室，ac mattis velit convallis quis。相位仅在一个位置变化。秃鹫设施。无尾狮子座，无尾狮子座，无尾猫科动物。这是一个很好的例子。青菜。腹部斜颈矢状肌，腹部指压按摩。弧前，非orci ut设施，临时弧后。Aenean luctus lacinia sapien，位于sagittis enim pharetra non。Phasellus blandit pharetra hendrerit。虎口浮雕和肘部浮雕同侧前庭；在佛吉亚迪亚姆的阿利奎姆，ut porttitor quam。

但overflow-y会根据我的需要在内容上添加滚动条。我希望内容具有其父级的宽度和高度。@EGUEYS代码示例更新如果希望

.content

div在其内容增长大于页面时滚动，则仍需要设置某些元素的垂直高度（在DOM树上）。你可以让

.wrap

有一个

最大高度：100vh

或其他东西，然后设置

.content{height:100%}

，但某些东西必须设置高度，否则它将始终是完整的内容高度。