html.de - Container passt sich nicht an | Demo #1

by SpiceLab

HTML

<div class="flex-container">
  <div class="flex-item">flex item 1<br />flex item 1<br />flex item 1<br />flex item 1</div>
  <div class="flex-item">flex item 2</div>  
</div>

CSS

* {
  box-sizing:border-box
}
.flex-container {
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:stretch;
  align-items:stretch;
  width:430px;
  padding:10px;
  background-color:lightgrey
}
.flex-item {
  background-color:cornflowerblue;
  width:200px;
  padding:5px
}
.flex-item:nth-child(2) {
  border-left:thin solid #000;
  background-color:white;
  margin-left:10px
}