CODEWITHSUNDEEP
htmlcss
Darius
Darius

Reputation: 27

Text Not Wrapping in a CSS flexbox (list)

So, I have this list, which will have multiple items, but the simpler version is below:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="stylesheet1.css">
</head>
<body>
    <ul class="longlist">
        <li class="item">
            <div class="row1">
                <div class="text">long long like very long text here, sometimes more than you would expect</div>
            </div>
            <div class="row2">
                <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh;0,0.190xh&resize=1200:*">
            </div>
        </li>
    </ul>
</body>

With the next CSS stylesheet:

.longlist{
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    margin-top: 1rem;
    line-height: 0;
}

.item{
    display: flex;
    flex-direction: row;
    background: white;
    overflow: hidden;
    align-items: center;
    height: 9.8rem;
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0px 2.5px 5px rgb(0, 0, 0, 0.8);
    margin-top: 1rem;
}

.row1{
    width: 70%;
    display: flex;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: -0.25px;
    text-transform: uppercase;
    font-style: italic;
    margin-left: 2.5rem;
}
.row2{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}

img{
    position: relative;
    height: 9.8rem;
}

What it should do, is have an image on the right side (it works with the code below) and text on the left side, which should wrap if it gets close to the image.

I've tried over-wrap, flex-wrap, white-space and they don't seem to fix my problem, the text will overlap. How can I fix it?

Upvotes: 0

Views: 333

Answers (1)

Medinios
Medinios

Reputation: 344

I put your code in Stackblitz and made some changes : https://stackblitz.com/edit/js-xr4myq?file=style.css

I changed your css:

.item{
    display: flex;
    flex-direction: row;
    background: white;
    overflow: hidden;
    align-items: center;
    height: 9.8rem;
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0px 2.5px 5px rgb(0, 0, 0, 0.8);
    margin-top: 1rem;
}

.row1{
     width: 70%;
    display: flex;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: -0.25px;
    text-transform: uppercase;
    font-style: italic;
    margin-left: 2.5rem;

}
.row2{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}

img{
    position: relative;
    height: 9.8rem;
}

a picture: enter image description here

Upvotes: 1

Related Questions