2

This task looks easy but I didn't find it so when trying to resolve it.

I have two flex items in column, first is 77% width with 5% right margin (to keep space between first and second item), the second is 18% width. When there 21% is not enough for second div content, it goes down to the second line, and fully fills it (flex-grow is set to 1). The first element also has grow of 1 and fills first line, but the right margin still remains.What I want - two lines fully filled with every of two items.

How to achieve this? 

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 50vw;
  
}

.one, .two {
  background: green;
  color: white;
  flex-grow: 1;
  margin-bottom: 1rem;
}

.one {
  flex-basis: 77%;
  margin-right: 5%;
}

.two {
  flex-basis: 18%;
}
<div class="container">
<div class="one">I am one I am one I am one I am one</div>
<div class="two">I am two I am two</div>
</div>

(huh, scaling gives no effect here, see it at https://jsfiddle.net/1471djg7/3/ )

Asons
  • 84,923
  • 12
  • 110
  • 165
Audiophile
  • 970
  • 2
  • 8
  • 20
  • As you use `flex-basis`, and its sum to less than 100%, should they wrap, and if so, when? ... Btw, you can't remove margin when an item wrap, and using margin with percent won't work cross browsers being flex item. – Asons Nov 02 '17 at 17:19
  • It wraps when width is not enough for current content. Margins in % works well for both webkit and firefox. Try it on jsfiddle – Audiophile Nov 02 '17 at 17:22
  • If the wrap should be based on an arbitrary contents width, you need another solution, as that is not possible for a flex item to know when it wrapped and remove its margin. – Asons Nov 02 '17 at 17:25
  • 2
    Something to consider: With the `grid-gap` properties in CSS Grid Layout, the "gutters" apply only between items, and never between items and the container. https://stackoverflow.com/q/46765533/3597276 – Michael Benjamin Nov 02 '17 at 17:37

0 Answers0