How to dynamically increase the container height based on the content inside it?

Question

I have this React component where I want my .lower-display to grow vertically as per the content entered by the user -

const Display = (props) => {
    return(
        <div className="display bg-dark">
            <div className="upper-display">{props.sample}</div>
            <div className="lower-display" id="display">{props.display}</div>
        </div>
    );
}

I have the following styles to applied to each of the div elements -

.display{
    width: 100%;
    text-align: center;
    color: white;
    border: 1px solid white;
    /* overflow: hidden; */
}

.upper-display{
    min-height: 30px;
    padding-right: 5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: orange;
}

.lower-display{
    min-height: 35px;
    padding-right: 5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 24px;
}

This doesn't give the results as expected. The content inside the .lower-display starts overflowing horizontally.

I tried using word-wrap: break-word; property, but it doesn't work either. How do I fix it?

Set a width for `.lower-display`... this would force the container to grow with the text — Asplund, Jun 21 '23 at 11:58
@Wimanicesir I tried putting them in p tags and it didn't work. Also used fixed width as mentioned by the other person and it didn't work either. — Satyam Rai, Jun 21 '23 at 12:18

samnoon · Accepted Answer · 2023-06-21T12:38:44.640

Remove the flex css from .lower-display class and add the following css:

  color: black;
  display: inline-block;
  width: fit-content;
  max-width: 100%;

Here.

max-width:100% prevents the width value of your .lower-display css from becoming larger than the full width (100%).
width: fit-content make use of the available space of the div
I removed display: flex and added display: inline-block for making sure the above two properties are applied to the div since flex was preventing the content wrap. This would wrap your .lower-display to grow vertically as per the content entered by the user. Notice I added color: black here (for better view).

Bellow is full CSS for your problem:


.display {
  width: 100%;
  text-align: center;
  color: white;
  border: 1px solid white;
  /* overflow: hidden; */
}

.upper-display {
  min-height: 30px;
  padding-right: 5px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-family: "Orbitron", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: orange;
}

.lower-display {
  min-height: 35px;
  overflow-wrap: break-word;
  padding-right: 5px;
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: black;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
}

Check the react Sandbox here.

References:

Just had to add the `word-wrap: break-word` and it works. Thanks!! — Satyam Rai, Jun 22 '23 at 04:45

How to dynamically increase the container height based on the content inside it?

1 Answers1