Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
  <div class="container">
    <div class="primary">
     Primary text aksdhbaskdasdaskhdvasd askdjbasd
    </div>
    <div class="secondary">
     Long long long long long secondary text asdjkhvasdjkhaskjdhvasdasdjhvasd asdhvasd
    </div>
  </div>
  
</body>
</html>
 
/* Decorations
-------------------- */
BODY {
  padding: 20px;
  background: white;
  }
.container {
  background: gold;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  width: min-content;
  max-width: 350px
 }
.primary {
  background: tomato;
  border-radius: 5px;
  border: 1px solid #FFF;
  flex-flow: row nowrap;
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
}
.secondary {
  background: tomato;
  border-radius: 5px;
  border: 1px solid #FFF;
  flex-flow: row nowrap;
  box-sizing: border-box;
  white-space: nowrap; /* try to remove it */
  text-overflow: ellipsis;
  overflow: hidden;
  width:0;
  min-width:100%;
 }
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers