0

Instead of expanding to fill available space, I want the flexboxes to allow all my content to fit without getting any bigger. For example, in this photo you can see that Insurgency:Sandstorm is forced to wrap. Obviously, I could manually adjust it to look good on (my) desktop browser, but I'd like it to dynamically resize itself if someone opens it on mobile.

Codepen

.panel {
    display: flex;
    margin: auto;
    width: 52%;
    flex-direction: column;
    justify-content: center;
    padding: 5px;
    border-style: solid;
    border-color: black;
    border-radius: 3px;
    margin-bottom:5px;
    background-color: #282936;
    border: 1px solid #191921;
    border-radius: 6px;
}
Max
  • 23
  • 3
  • allow wrapping and do not `.panel-content { display: flex; flex-direction: row; justify-content: space-around; /*justify-content: flex-start;*/ align-items: center; color: #8A8DB7; flex-wrap:wrap; } .panel-content h3 { font-size: 1.75em; white-space:nowrap; padding: 15px; }` – G-Cyrillus Jun 25 '19 at 15:11
  • 1
    Possible duplicate of [Make flex items take content width, not width of parent container](https://stackoverflow.com/questions/40141163/make-flex-items-take-content-width-not-width-of-parent-container) – Adrian Danlos Jun 25 '19 at 15:22
  • add `align-items: flex-start` to the panel. It has already been answered on this post. https://stackoverflow.com/questions/40141163/make-flex-items-take-content-width-not-width-of-parent-container – Adrian Danlos Jun 25 '19 at 15:23
  • I'm sorry, maybe I'm misunderstanding, but [this is the result](http://prntscr.com/oambce). I don't want to hard-code width. @AdrianDanlos Should I enclosing all the panels in a flex box, or something? – Max Jul 04 '19 at 16:06

0 Answers0