I am trying to make a div in CSS that contains icons A, B, and C as well as some text which will wrap. All icons and text in each div must align with the ones in other divs. I am currently using flexbox in order to accomplish this.
Look at the picture below and note that icons A,B, and C between divs are all vertically aligned when the html is displayed in Chrome:
In Safari, icons A, B, and C all fit inside the container correctly unless the text becomes too wide. Notice that the second and third divs with short text are vertically aligned in Safari, but not the div with longer text that wraps:
How do I make the divs align correctly in Safari like they do in Chrome?
Here is a Plunker for your convenience.
Here is the code:
/* Styles go here */
.goal {
background-color: white;
border-color: #23b389;
border-style: solid;
border-width: 1px 1px 1px 20px;
min-height: 60px;
margin: 20px 0 0 20px;
display: flex;
justify-content: space-between;
}
.clickable {
cursor: pointer;
}
.item-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 100%;
}
.item-container .collapse-expander {
margin-left: -20px;
color: white;
font-size: 20px;
cursor: pointer;
}
.item-container > :not(.collapse-expander) {
margin: 1px 20px;
max-width: 100%;
}
.item-container > :not(.collapse-expander):not(:last-child) {
margin-right: 0;
}
.text {
font-weight: normal;
white-space: pre-wrap;
word-wrap: break-word;
}
.standard-icon {
color: #1aa8de;
font-size: 22px;
cursor: pointer;
}
.menu-icon {
color: #1aa8de;
font-size: 22px;
cursor: pointer;
position: relative;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<br>
<br>
<div class="goal">
<div class="item-container">
<div class="collapse-expander">A</div>
<div class="standard-icon">B</div>
<div class="clickable">
<span class="text">
This is an awesome paragraph! I love this paragraph so much that I will just keep typing and typing and typing whenever I want. This is so cool.
</span>
</div>
</div>
<div class="item-container">
<div class="menu-icon">
C
</div>
</div>
</div>
<div class="goal">
<div class="item-container">
<div class="collapse-expander">A</div>
<div class="standard-icon">B</div>
<div class="clickable">
<span class="text">
This is an awesome paragraph!
</span>
</div>
</div>
<div class="item-container">
<div class="menu-icon">
C
</div>
</div>
</div>
<div class="goal">
<div class="item-container">
<div class="collapse-expander">A</div>
<div class="standard-icon">B</div>
<div class="clickable">
<span class="text">
Another awesome paragraph!
</span>
</div>
</div>
<div class="item-container">
<div class="menu-icon">
C
</div>
</div>
</div>
</body>
</html>UPDATE 3/23/16:
Still no luck. I've tinkered with it for a while and nothing seems to be working. I've even tried updating Safari, but the bug still persists.
UPDATE
Found that the problem is likely caused by Safari not changing the width of the text div correctly when the screen resizes, while Chrome does. I tested this hypothesis by defining the max-width attribute on the .clickable class, and I got the following result in Safari:
This doesn't solve my problem since I do need the width to change dynamically in order to fit the container correctly, but it does give some kind of a clue as to why this problem is occurring in Safari.
UPDATE
Tinkered with it some more, and though I don't have a perfect solution, I do have a solution that prevents the icons from moving outside of the div. Check out the following plunker.
UPDATE
This bug no longer appears in the latest version of Safari as of the time of this writing (January 2020).
