使父div扩展到窗口之外以包装所有子对象

Question

While this sounds like a pretty simple problem to solve, I have not found a way to do this without using Javascript.

Consider this example: https://jsfiddle.net/oopssam8/1/

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

div > div {
  width: 200px;
  flex-shrink: 0;
  height: 200px;
  background: red;
}

body > div {
  display: flex;
  flex-flow: row nowrap;
}

As you can see, the red boxes expand beyond the window. Each box is 200px wide, and so when when inspecting their parent, I expect to see a width of 2000px (there are 10 red boxes). The computed width of the parent div does not extent beyond the window width.

Is there any way I could make the parent div expand beyond the window and wrap all child element?

Answer 1

You could set the value of the width on the container div to: width: fit-content; (with additional vendor prefixes, like in the example below)

Here's the working example:

 div > div { width: 200px; flex-shrink: 0; height: 200px; background: red; } body > div { display: flex; flex-flow: row nowrap; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } 

 <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>