Sorona Sorona - 9 months ago 64
CSS Question

How to make img scale in flexbox?

I have this huge image (I know, bad, will be replaced by some smaller ones for different viewport-sizes) that I want to display next to another div. Both elements are inside a flexbox, so flex-items.


My problem is that the image is way too big. What I would want is the image to take up all the space of

which itself should only maximum take up 30% of the whole horizontal space, so having 70% of the
main class='flex-container'
and the rest for a an image that is contained in the 30% (preferably cropped instead of scaled)

Sounds easy, right? Just add


Image is still too big.

So what, just add
max-width:100%; max-height:100%;
to the img itself, right?

Again, not working as intended:

Answer Source

is this what you looking for?

  • set flex: 0 70% in .details
  • set flex: 0 30%; display: flex; align-items: center in #test

body {
  margin: 0;
  padding: 0;

#info {
  background-color: #2aabd2;
  max-width: 100vw;
  min-height: 100vh;

#info nav {
  max-width: 5%;

.flex-container {
  display: flex;

main {
  background-color: red;

.details {
  flex: 0 70%

#test {
  flex: 0 30%;
  background: blue;
  display: flex;
  align-items: center

.testimage {
  display: block;
  max-width: 100%;
  background-color: blueviolet;
  box-shadow: 0 0 10vh #111;
<section id="info" class="flex-container">
  <nav id="node">
  <main class="flex-container">
    <div class="details">
    <div id="test">
      <img class="testimage" src="">