CSS flex layout - clipped text and missing right margin
I am trying to use flex schema in a simple image gallery (wip) http://codepen.io/anon/pen/vmhLe .
<html>
<head>
<style>
.thumbPanel {
display: flex;
align-items: center;
border: 2px solid MidnightBlue;
background-color: Gray;
}
.thumbAdminMenu {
display: flex;
flex-direction: column;
align-items: stretch;
}
.thumbAdminButton {
display: inline-block;
margin: 0px;
margin-left: 5px;
flex-shrink: 0;
flex-grow: 0;
border: 2px solid MidnightBlue;
font-size: 20pt;
}
.thumbList {
display: flex;
align-items: center;
margin: 5px;
overflow: auto;
width: 100%;
border: 2px solid MidnightBlue;
background-color: Gainsboro;
}
.thumbArea {
min-width: 200px;
min-height: 200px;
margin: 5px 0px 5px 5px;
background-color: LightGoldenRodYellow;
border: 1px solid MidnightBlue;
}
.thumbArea:first-child, {
margin-left: 0px;
}
.thumbArea:last-child {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="thumbPanel">
<div class="thumbAdminMenu">
<button class="thumbAdminButton">AddXXX</button>
</div>
<div class="thumbList">
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
</div>
</div>
</body>
</html>
Result (browser window shrinks):
http://i.imgur.com/znMcrS2.png
Why is AddXXX text truncated?
Why is the right edge of the right majority of the yellow div missing? I set it up using a rule .thumbArea:last-child
.
Here's a playground: http://codepen.io/anon/pen/vmhLe . There's a codepen and jsfiddle issue with a bottom horizontal scrollbar (at least for me in Chrome). But when viewing the HTML file, it displays fine. Also, if you open the developer console in Chrome, it will show up too.
Thank.
source to share
I cannot reproduce the truncated text without issue in either Firefox or Chromium.
You can fix the margin error by adding an element alias ::after
for the wrapper:
.thumbList:after {
content: ''; /* Enabling the pseudo-element */
min-width: 5px; /* Fake margin */
height: 1px; /* Anything but 0 */
}
.thumbPanel {
display: flex;
align-items: center;
border: 2px solid MidnightBlue;
background-color: Gray;
}
.thumbAdminMenu {
display: flex;
flex-shrink: 0;
flex-direction: column;
align-items: stretch;
}
.thumbAdminButton {
display: inline-block;
margin: 0px;
margin-left: 5px;
flex-shrink: 0;
border: 2px solid MidnightBlue;
font-size: 20pt;
}
.thumbList {
display: flex;
align-items: center;
margin: 5px;
overflow: auto;
border: 2px solid MidnightBlue;
background-color: Gainsboro;
}
.thumbArea {
min-width: 200px;
min-height: 200px;
margin: 5px 0px 5px 5px;
background-color: LightGoldenRodYellow;
border: 1px solid MidnightBlue;
}
.thumbList:after {
content: '';
min-width: 5px;
height: 1px;
}
<div class="thumbPanel">
<div class="thumbAdminMenu">
<button class="thumbAdminButton">AddXXX</button>
</div>
<div class="thumbList">
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
</div>
</div>
source to share