CODEWITHSUNDEEP
htmlreactjsword-wrap
Aroxis
Aroxis

Reputation: 67

words in an ordered list will not wrap when the input is too large

My words are not wrapping when the input is too long. I have tried using flex-wrap and align-items but to no avail. As soon as the input it too large, it spills over. Here is how it looks below. enter image description here

Here is my Css file

.recipe{ 
    border-radius: 20px;
    box-shadow: 0px 5px 5px black;
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background:white;
    align-items: center;
    min-width: 40%;
    flex-wrap: 'wrap';
    white-space: unset;
}

.image{
    border-radius:50%;
    width: 100px;
    height: 100px;
}

And here is my javascript file recipe.js

import React from "react";
import style from './recipe.module.css'

const Recipe = ({title, calories, image, ingredients}) => {

    const round = Math.round(calories);
    
   
    return(
        <div className = {style.recipe}>
            <h1 >{title}</h1>

            <ol>
                {ingredients.map(ingredient => (
                    <li>{ingredient.text}</li>
                ))}            
            </ol>

            <p>calories: {round} </p>
            

            <img className = {style.image} src={image} alt=""/>

           
        </div>
    )
}

export default Recipe;

Upvotes: 0

Views: 103

Answers (2)

İlker
İlker

Reputation: 2090

ingredients' parent element is not the div, it's <ol> tag. so you need to make that flex , then you can use flex-wrap, or you proably won't need.

Upvotes: 1

machineghost
machineghost

Reputation: 35790

Two things if you want an element's text to wrap:

  1. their container element must have a limited width (but right now your OL lacks one, and is exceeding the width of its parent)

  2. the element with the text to be wrapped should have a style of whitespace: wrap (but currently it doesn't ... or at least not an explicit one, but it's likely the default value already)

Upvotes: 1

Related Questions