Wrap the Content inside the Input Value

Question

Is there any way to wrap the content with the input field, in my case is taking a size, but I would like for example if it is the value "123" for the input to be wrapped around the text, and when we type more words it grows in size, without having a fixed size like this in the screenshot.

Screenshot of the Input Text Field 1

My Component structure JSX:

Here is CSS, using Styled Components:

const Container = styled.section`
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 7px 10px;
    gap: 10px;
    background: transparent;
    border-radius: 4px;
    border: 1px solid ${props => props.theme.border};
`

const Input = styled.input`
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #455560;
    border: 0;
    background: transparent;
    display: flex;

    &::placeholder{
        color: #0056FC;
    }
`

user_19350153 · Answer

I think now that must work.

span {
  padding: 5px;
}
     
div {
  display: flex;
  width: max-content;
}


  Input Field :

user_1221208 · Answer

You've already got the right answer, I just wanted to show the contenteditable strategy to achieve the same result:

.content {
  display: flex;
}

#field {
  min-width: 3rem;   /*3 chars min length*/   
  border: 3px solid gray;
  cursor: text;  
  padding: 5px;
}

Wrap the Content inside the Input Value

2 Answers