inside container with display flex become corrupted

Question

This behavior is a little odd and weird. If there is a container with its display property set to flex and flex-direction to column<

Answer 1

Try enclosing your hr in another flex-item (like a div, span or something else) as following. This will resolve your issue.

Reason why this works is all children of a flex box container are flex-items. So in your case hr was a flex-item. That's why its styling got effected. When you make this hr a grand-child of the flex box container, it will no longer effect its styling.

That's why we added

as parent of

---

.

becomes flex-item of your flex container.

---

is no more a flex-item.

html, body {
  height: 100%;
}
body {
  font-family: sans-serif;
}
.container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

  
Title
  

  

    
This is some content
  

Further Reading (Highly recommended):

• Basic Concepts of Flexbox
• Ordering Flex Items

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...