idungotnosn idungotnosn - 2 months ago 8
CSS Question

Safari not aligning divs correctly when screen size changes

This bug only occurs in Safari and I don't know how to work around it.

I have a styled div that looks like this in Chrome when the screen is a particular size. Note that all of the blue B's align correctly with one another:

enter image description here

The exact same div with nearly the same screen size looks like this in Safari:

enter image description here

Notice how the blue "B" is not aligned in the Safari example, but remains aligned in the Chrome example. Also worth noting is that this problem does not occur if the screen size is much wider. The following screenshot was also taken from Safari where the B is aligned correctly between all three rows:

enter image description here

What appears to be happening is that Safari will play fast and loose with the margins of the div if one of that div's inner elements contains text and is horizontally aligned with other divs.

How do I make the 'Bs' align all of the time in Safari?

The html/css used in the pictures above is shown below for reference:



/* Styles go here */

.goal {
background-color: white;
border-color: #23b389;
border-style: solid;
border-width: 1px 1px 1px 20px;
margin: 20px 0 0 20px;
}

.clickable {
cursor: pointer;
}

.item-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: inline-flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
width:100%;
align-items: center;
justify-content: space-between;
}
.item-container > :not(:first-child) {
padding:20px;
}

.item-container > :last-child {
padding-left:0px;
}

.collapse-expander {
margin: auto 0 auto -20px;
color: black;
font-size: 20px;
cursor: pointer;
}

.text {
font-weight: normal;
white-space: pre-wrap;
word-wrap: break-word;
flex-grow:1;
}
.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 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.</div>
<div class="menu-icon">
C
</div>
<div class="menu-icon">
D
</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 text"> is so cool.</div>
<div class="menu-icon">
C
</div>
<div class="menu-icon">
D
</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 text">his is so cool.</div>
<div class="menu-icon">
C
</div>
<div class="menu-icon">
D
</div>
</div>
</div>

</body>

</html>




Answer

Fixed by adding a width of 100% on your clickable text div.

.clickable.text {
   width: 100%;
}