DraftJS 组件在 Flexbox 中占用太多 Space

Question

我正在 flexbox 中嵌入 React Draft Wysiwyg 组件。 flexbox 应该由这个组件和一个圆 div.

组成

由于某种原因，圆圈 div 被压扁了，不是圆形，而是比应有的要窄。

我可以通过传递 wrapperClassName 属性并添加 w-fit（这是纯 CSS 中 width: fit-content; 的 Tailwind 等价物来减少这个 'squishiness' , 然而，圆圈在较窄的屏幕上仍然被压扁。

图片：

代码：

<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 需要保持比例圆的 space？

Answer 1

您可以给编辑器 w-full 并给圆 p-5 而不是 w-9

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

DraftJS 组件在 Flexbox 中占用太多 Space

DraftJS Component Takes too much Space Inside Flexbox

css

reactjs

tailwind-css

react-draft-wysiwyg