2

I have a Flexbox container in a React app with flex-direction: row. The container contains two tiles, both with flex: 1. Each occupies 50% of the width as shown below. This is expected.

enter image description here

However, when the state of the component changes and only Tile 1 is rendered, it still occupies only 50% of the width, not expanding to take up the full width. When I wiggle the browser window a bit, Tile 1 expands to the full width. Note that the state of the component has not changed during the window resize, only that the tile now occupies the full width. I am thinking that I may have hit some React + Flexbox bug. Any ideas what this may be?

Unfortunately I am not able to reproduce this issue with a minimal example. Here's the live version of the minimal example that works perfectly! The source code is here.

The rendered HTML and CSS are effectively as simple as the following:

body {
  font-family: Arial, Verdana, Helvetica, sans-serif;
}

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

.content {
  flex: 1;
  min-width: 0;
  margin-right: 4px;
  padding: 4px;
  height: 60px;
  color: white;
  background-color: #2196f3;
}
<div class="container">
  <div class="content">
    Tile 1
  </div>
  <div class="content">
    Tile 2
  </div>
</div>

The real code is further wrapped using react-measure and react-swipeable-views, but I don't think those are contributing to the issue.

Naresh
  • 23,937
  • 33
  • 132
  • 204
  • Your sample works fine for me (tile 1 expanding to 100%) on Edge & Chrome – Ji aSH Jan 19 '18 at 08:55
  • @AshKander, as I mentioned in the question: "I am not able to reproduce this issue with a minimal example". The minimal example I have provided works perfectly. I am hoping that someone has encountered this issue in more complex layouts and might be able to provide some insight. – Naresh Jan 19 '18 at 11:49
  • Can you show your conditionnal rendering on the tile 2 ? Do you wrap it correctly ? – Dyo Jan 19 '18 at 12:02
  • Well its hard to tell whats the issue when it cannot be reproduced :p. you probably have something wrong with another css rule – Ji aSH Jan 19 '18 at 13:07
  • Ash and Dyo, thanks for your help. I agree that it's hard to tell what's the issue if it can't be reproduced. The good news is that I now know the cause. If I remove both react-measure and react-swipable-views, then the issue goes away. There is nothing wrong with the CSS rules! So it's a matter of narrowing down what these two libraries are doing. I can take it from here. Thanks again for your help. – Naresh Jan 19 '18 at 13:42

0 Answers0