DraftJS组件在Flexbox中占用太多空间

Question

我将反应所见即所得草案组件嵌入到一个柔性盒中。挠曲盒应该由这个组件和一个圆形div一起组成。

由于某些原因，圆周div会被压缩，而不是圆形，而是比它应该的范围更窄。

我可以通过传递wrapperClassName道具并添加w-fit (这是纯CSS中的width: fit-content;的尾风)来减少这种“粗糙”，然而，这个圆圈仍然压在较窄的屏幕上。

图像：

​

​

代码：

<div className='flex gap-x-2 items-center w-full min-w-[480px] h-full py-3 px-2 bg-gray-50 rounded'>

    {/* Rich text editor component */}
    <Editor 
        wrapperClassName='w-fit'
    />
    
    {/* Circle */}
    <div className={'group w-9 h-9 rounded-full'} />
    
</div>

我怎样才能让Editor组件取下所有剩余的宽度，而不带走圆环div需要保持成比例圆的空间呢？

Answer 1

你可以给编辑器w-full，给圆圈一个p-5而不是w-9

这就是你的意思吗：https://play.tailwindcss.com/cPxzlro2re