cssreactjstailwind-cssreact-draft-wysiwyg

DraftJS Component Takes too much Space Inside Flexbox

I'm embedding React Draft Wysiwyg component within a flexbox. The flexbox should consist of this component alongside a circle div.

For some reason, the circle div gets squished and is not circular, but instead is narrower than it should be.

I can reduce this 'squishiness' by passing the wrapperClassName prop and adding w-fit (which is the Tailwind equivalent of width: fit-content; in pure CSS), however, the circle is still squished on narrower screens.

Image:

enter image description here

Code:

<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>

How can I get the Editor component to take all remaining width without taking away the space that the circle div needs to remain a proportional circle?

Solution

  • You could give the Editor w-full and give the circle a p-5 instead of w-9

    Is this what you meant: https://play.tailwindcss.com/cPxzlro2re