0

So I noticed with just div display table with width 0, the h2 inside that div takes up as much width needed, however, the question is now, why when adding a parent div outside of all that with display flex, now the h2 gets a linebreak on img width.

.container {
  display: flex;
  flex-direction: row;
}

img {
  height: 20vh;
}

.single-container {
  display: table;
  width: 0;
}
<div class="container">
  <div class="single-container">
    <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
    <h2>I'm trying to not make this more than image width.</h2>
  </div>
  <div class="single-container">
    <img class="img2" src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
    <h2>I'm trying to not make this more than image width.</h2>
  </div>
  <div class="single-container">
    <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
    <h2>I'm trying to not make this more than image width.</h2>
  </div>
</div>

https://jsfiddle.net/bqdxze94/51/

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
John Bryant
  • 79
  • 1
  • 7
  • It works fine in FF & chrome windows, but flex will not care about display and float for its direct children, they are flex children element on top of all ;) – G-Cyrillus Jul 15 '18 at 19:01
  • Simply put, when you add the outer `div` and make it a flex container, the `display: table` elements becomes flex items, and as such, the `width: 0` will impact their width different than when they were _displayed as a table_. Further reading in the dupe link. – Asons Jul 15 '18 at 19:36
  • Interesting to know.... i wouldn't think they become flex times because i thought display flex only affects child one level down, not multiple levels. because outer div is display flex, then child is display table, then child of that is still a flex item? interesting. – John Bryant Jul 15 '18 at 20:08
  • @JohnBryant The only flex items in this case is the `.single-container` elements, as Flexbox is a parent/child relationship. They are at the same time `display: table`, which will effect their children. Why they behave different with or w/o the outer `div`, is that a flex item is a block like element, hence the `width: 0` will shrink them as much as possible, which is not the case w/o the outer `div`. – Asons Jul 16 '18 at 07:42

0 Answers0