3

Please look at my drawing: enter image description here

Here is description:
(1) I have a flexbox with two columns. I want it to work as follows: When one of the boxes bigger than half of the width and there is a space for both boxes, then do nothing. (or stretch both proportionally)

(3) If one of the boxes bigger than half but both boxes don't fit - than shrink only the one that is bigger than half.

(4) If both boxes bigger than half - shrink both proportionally.

This is an example where I want to see this to happen: http://jsbin.com/upArEVI/3/edit

Here is how it works in the code example above graphically: enter image description here

And here is the code:

body{
  width: 100%;
  padding:0;
  margin:0;
  background: white;
}
.line{
  display: flex;
  height: 50px;
  border-top:1px solid lightgray;
  border-bottom:1px solid lightgray;
}
.left, .right{
  flex: 0 1 auto;
  overflow:hidden;
  text-overflow: ellipsis;
  background: rgba(0,200,0,0.1);
  white-space: nowrap;
  border-right:2px solid black;
}
.right{
  text-align: right;
  flex: 1 1 auto;
  background: rgba(0,0,200,0.1);
}
.middle{
  position: absolute;
  top:0;
  width:50%;
  height: 100%;
  border-right:2px dotted red;
}

With html

<div class="line">
  <div class="left">
    something 2 something 3
  </div>
  <div class="right">
    something 5
  </div>
</div>
Aleksandr Motsjonov
  • 1,230
  • 3
  • 14
  • 25
  • What purpose does the filler div serve? – cimmanon Nov 05 '13 at 15:34
  • possible duplicate of [CSS3 flexbox adjust height of vertically aligned elements](http://stackoverflow.com/questions/19138940/css3-flexbox-adjust-height-of-vertically-aligned-elements) – cimmanon Nov 05 '13 at 15:41
  • @cimmanon I remved it. It has no purpose. No, it is not a duplicate. the only similarity is that both cases about flexbox. – Aleksandr Motsjonov Nov 05 '13 at 16:34
  • Yes, they are exactly alike. The only difference is the orientation. The problem is solved the exact same way. – cimmanon Nov 05 '13 at 16:52
  • No it's not. There is percents. I don't have percent. Did you looked my diagrams carefully? I want block don't shrink AT ALL if it's content width is less then half of the container. Anyway, if you think this is same question please edit my code and make it work using that question – Aleksandr Motsjonov Nov 05 '13 at 21:47
  • Have a go with Flexplorer or Flexy Boxes. They enable you to do very quick tests. http://bennettfeely.com/flexplorer/ or http://the-echoplex.net/flexyboxes/ – 2507rkt3 Nov 06 '13 at 19:35
  • This is just UI for flexbox and for those who don't know how to write CSS I assume. I mean I think I know how flexbox, but I am not a professional with it. I though somebody would tell me how to do what I want OR tell definitely that this is not possible. I don't think this UI can help me. But thx. This is valuable resource for the future. – Aleksandr Motsjonov Nov 11 '13 at 09:47

1 Answers1

0

See if this is what you're looking for:

* {
  padding:0;
  margin:0;
}
.line{
  display: flex;
  height: 50px;
  border-top:1px solid lightgray;
  border-bottom:1px solid lightgray;
}
.left, .right{
  flex: 1 auto;
  text-overflow: ellipsis;
  background: rgba(0,200,0,0.1);
  border-left:1px solid lightgray;
  border-right:1px solid lightgray;
  overflow: hidden;
  white-space: nowrap;
}
.right{
  text-align: right;
  background: rgba(0,0,200,0.1);
}
<div class="line">
  <div class="left">
    something 2 something 3 something 4
  </div>
  <div class="right">
    something 5 something 5 something 6
  </div>
</div>
<div class="line">
  <div class="left">
    something 2 something 3 something 4 something 4 
  </div>
  <div class="right">
    something 5 something 5 something 6
  </div>
</div>
<div class="line">
  <div class="left">
    something 2 something 3 something 4 something 4 something 4  
  </div>
  <div class="right">
    something 5 something 5 something 6
  </div>
</div>

And here's a link to see a working model.

Pixel Rubble
  • 1,104
  • 3
  • 14
  • 26