Kevin Powell - Community•3mo ago

how to wrap these in elements within 50px of height in css

so i want that icon and two p tags text inside 50px of height . in that icon place there will be a mui icons , icon fits perfect but the text going outside , i tried justify-content:unset;

<div id='ios-icon-div'>
      <div>
        <p>Icon</p> // It is a placeholder and This fits well 
      </div>
    <div id='ios-download-text' >
        <p>Download on the </p> //this text going outside
         <p>Apple Store </p>  //this text going outside
      </div>
</div>

<div id='ios-icon-div'>
      <div>
        <p>Icon</p> // It is a placeholder and This fits well 
      </div>
    <div id='ios-download-text' >
        <p>Download on the </p> //this text going outside
         <p>Apple Store </p>  //this text going outside
      </div>
</div>

#ios-icon-div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: red;
    height: 50px;
    width: 140px;
}

#ios-download-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  justify-content:unset;
    overflow: hidden;
}

#ios-icon-div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: red;
    height: 50px;
    width: 140px;
}

#ios-download-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  justify-content:unset;
    overflow: hidden;
}

2 Replies

Mannix•3mo ago

have you tried removing the default margin those p tags have ??

vicOP•3mo ago

Thank u i didn't know about this

Gaming

Programming

how to wrap these in elements within 50px of height in css