flex item flex-grow demo

by Slava

HTML

<div class="container">
	<div class="flex">
		 <div>Item asd<br>fasdf</div>
		 <div class="close">
		 	<div class="X">X</div>
		</div>
	</div>
</div>

CSS

div {
  border: 1px solid grey;
}

.container {
  max-height: 100px;
  overflow: auto;
  border: 2px solid red;
}

.flex {
  display: flex;

  background: none;
  border: 2px solid blue;

  & > div {
    padding: 50px;
    background: #dadada;
  }

  .close {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
    max-width: 200px;

    overflow: visible;
    border: 2px solid orange;
    padding: 0;
		position: relative;
		
		align-content: flex-end;

    & .X {
      
      padding: 10px;
      width: 20px;
			height: 20px;
    }
  }
}