CSS formatting with flexbox and other divs

Question

I am trying to format a webpage using CSS so that it looks like this:

The idea is that the page is responsive as follows; the red and blue column (left and right) should each have a set width. The center column will be collapsible (it contains a series of consistently-sized square divs inside it and should be a flexbox with:

flex-direction: row;
flex-wrap: wrap;
max-width: 962px;

I've tried a number of configurations with this, and the best I've gotten is that the three divs are inline, but the blue div is overlapping the yellow flexbox instead of forcing it to collapse and wrap.

Could someone give me an idea of what display/position/etc. CSS attributes I should use here?

We can just use .red, .yellow, and .blue to describe, please.

Thanks!

Answer 1

unfortunately you haven't put your source code, so I don't see exact your problem, but I think you missed the basic of Flexbox Layout which is the container for the items (your divs) and then u can set the layout.

---

Solution

Yours 3 divs should be in one container. Container defines the Flex layout and its behaviour. As you wrote above, the outside divs (.red and .blue) have setted static width and middle div (.yellow) has property flex: auto which match up his width in container.

Here below is the code snippet with my solution.

div {
  border: 2px solid black;
  padding: 5px;
}

#container {
  display: flex;
}

.red {
  border-color: red;
  width: 100px
}

.yellow {
  border-color: yellow;
  margin: 0px 5px;
  flex: auto;
}

.blue {
  border-color: blue;
  width: 100px
}

<div id="container">
  <div class="red">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. </div>
  <div class="yellow">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. </div>
  <div class="blue">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</div>
</div>

---

Knowledge

You can read more about Flexbox Layout here.