Test flex right column

by Bacher

HTML

<div class="cont">
  <div class="left">
    hello
  </div>
  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, aperiam enim distinctio. Nulla, nobis soluta similique magni quibusdam, accusantium voluptatum fuga dicta omnis veniam repellendus iste consequuntur harum, suscipit incidunt?
    <div class="popup">
      HELLO
    </div>
  </div>
</div>

SCSS

.cont {
  position: relative;
  width: 200px;
  display: flex;
  justify-content: space-between;
  border: 2px solid #f00;
  overflow: hidden;
}

.left {
  padding: 10px;
  background: azure;
}

.right {
  //position: relative;
  white-space: nowrap;
  padding: 10px;
  color: #fff;
  flex-grow: 1;
  background: blue;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup {
  position: absolute;
  background: #fff;
  width: 200px;
  height: 50px;
  color: #000;
  top: 20px;
  left: 30px;
  border: 2px solid #0f0;
}