Skip to content

Instantly share code, notes, and snippets.

@azusa-tomita

azusa-tomita/index.html

Created September 3, 2019 09:17
Show Gist options
  • Save azusa-tomita/3c725e3ec792d24ea78dc67f3ee03c11 to your computer and use it in GitHub Desktop.
Save azusa-tomita/3c725e3ec792d24ea78dc67f3ee03c11 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style id="jsbin-css">
*{margin:0;padding:0;box-sizing:border-box;vertical-align:top;}
body{
padding:1em;
}
ul{
display:flex;
justify-content:flex-end;
align-items:flex-end;
width:100px;
height:100px;
border:1px solid gray;
}
li{
display:block;
flex:0 0 auto;
width:40px;
border:1px solid tomato;
}
</style>
</head>
<body>
<h1>IE11でflexアイテムがコンテナからはみ出す場合、justify-contentが解除される</h1>
<ul>
<li>aaa</li>
</ul>
<br>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<br>
<ul>
<li><img src="https://dummyimage.com/25x50/fee/000" alt=""></li>
</ul>
<br>
<ul>
<li><img src="https://dummyimage.com/30x110/eef/000" alt=""></li>
</ul>
<h3>IE11のキャプチャ</h3>
<img src="data:image/png;base64,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" alt="" border="1">
<script id="jsbin-source-css" type="text/css">*{margin:0;padding:0;box-sizing:border-box;vertical-align:top;}
body{
padding:1em;
}
ul{
display:flex;
justify-content:flex-end;
align-items:flex-end;
width:100px;
height:100px;
border:1px solid gray;
}
li{
display:block;
flex:0 0 auto;
width:40px;
border:1px solid tomato;
}</script>
</body>
</html>
Raw
jsbin.qecaqir.css
*{margin:0;padding:0;box-sizing:border-box;vertical-align:top;}
body{
padding:1em;
}
ul{
display:flex;
justify-content:flex-end;
align-items:flex-end;
width:100px;
height:100px;
border:1px solid gray;
}
li{
display:block;
flex:0 0 auto;
width:40px;
border:1px solid tomato;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment