0

http://jsfiddle.net/mnkfdcLz/4/

  .child1{
      padding: 10px; flex: 1;

  }
  .parent {
    font-size: 20px;
      height: 50px;
      border: 1px solid rgba(0, 0, 0, 0.125);
    display: flex;
  }
  .child2 {
    flex: 0;
  }
<div class="parent">
  <div class="child1">
    {SUBJECT}
  </div>
  <span class="child2">
    <button class="but"><i class="fa fa-user fa-fw" ></i></button>
  </span>
</div>

This represents the porblem. I want the button to stretch both vertically and horizontally. Thank you

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
Akbar Hashmi
  • 57
  • 1
  • 7

2 Answers2

1

If you set an element to display:flex, it automatically assigns align-self:stretch to the children.

.parent {
  font-size: 20px;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.125);
  display: flex;
}

.child1 {
  padding: 10px;
  flex: 1;
}

.child2 {
  flex: 0;
  display: flex; /* NEW */
}
<div class="parent">
  <div class="child1">{SUBJECT}</div>
  <span class="child2">
    <button class="but"><i class="fa fa-user fa-fw" ></i></button>
  </span>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • `height: 100%` on `.child2` or the `button`? On some browsers, [a percentage height may fail on the child unless there's an explicit height defined on the parent](https://stackoverflow.com/a/31728799/3597276). @TemaniAfif – Michael Benjamin Aug 06 '18 at 15:16
  • on the button, and with flexbox it won't fail because a child item when it get stretched with the flexbox alignment it's like it has a height specified ... so child2 is stretched and button will be 100% height of it – Temani Afif Aug 06 '18 at 15:18
  • Yes, that's my answer. But why specify `height: 100%` if the flex container already does that automatically? Sorry, maybe I'm misunderstanding what you're saying. @TemaniAfif – Michael Benjamin Aug 06 '18 at 15:19
  • Works almost as id like it to! How can I make the width of child2 same as the height? So that it looks like a square. – Akbar Hashmi Aug 06 '18 at 15:19
  • here is to illustrate what I meant : https://jsfiddle.net/d7jwevho/3/ .. you can use % height with a child item of flex item because when the flex item is stretched the use of % will work with his child ... so we can add display:flex to make the button stretch OR we add height:100% to button to make it 100% height of the flex item `.child2` [so instead of `display:flex` you make `height:100%` and it will also work ] – Temani Afif Aug 06 '18 at 15:23
  • 1
    Well, you know the height of the box (50px). So then give it the same width: https://jsfiddle.net/0ft8uq2s/3/ – Michael Benjamin Aug 06 '18 at 15:25
  • @TemaniAfif, but that's exactly my point. Your blue box has a percentage height. It's parent, the green box (a flex item), has no height defined. This is a violation of [traditional percentage height rules](https://www.w3.org/TR/CSS22/visudet.html#the-height-property). Most major browsers will render as you expect (using browser's *used* (not computed) value). Safari will not. Please see link in my previous comment and this link: https://stackoverflow.com/q/33636796/3597276 – Michael Benjamin Aug 06 '18 at 15:31
  • I tried that, the problem is the icon is not aligned in the middle https://ibb.co/fWfaLe – Akbar Hashmi Aug 06 '18 at 15:32
  • Perfect! Im afraid I can't select this answer as I don't have enough rep Edit: Appears I can – Akbar Hashmi Aug 06 '18 at 15:39
  • You already "selected" it (checkmark). You just can't "upvote" it yet ;-) No problem. Glad I could help. – Michael Benjamin Aug 06 '18 at 15:40
  • yes I know about those rules but when testing it seems to be fine (I don't have Safari by the way) and my understanding of this particular case is that when a flex item get stretched its height value will no more be auto but will be the new value given by the stretch and that's why in this case using % with its child element work ... I have no formal proof of this and if it should be like this or not but it's somehow logical for me that is working – Temani Afif Aug 06 '18 at 15:42
  • It does indeed work in most major browsers, but it's not based on spec guidance. In fact, technically, it's a violation of the spec, because the CSS `height` definition last received an update in 1998, before `flex`, `grid` heights arrived on the seen. So I think it's safe to assume that the behavior you describe is safe to use at this point, but it's not yet official. And it fails in Safari. @TemaniAfif – Michael Benjamin Aug 06 '18 at 15:45
0

Set .child2 to display:flex

.child1 {
  padding: 10px;
  flex: 1;
}

.parent {
  font-size: 20px;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.125);
  display: flex;
}

.child2 {
  flex: 0;
  display: flex;
}
<div class="parent">
  <div class="child1">
    {SUBJECT}
  </div>
  <span class="child2">
    <button class="but"><i class="fa fa-user fa-fw" ></i></button>
   </span>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161