Setting width inside of a flex row div

Question

I have the following css:

#app {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 10px;
                padding: 20px;
                margin: 20px auto 20px auto;
                max-height: 400px;
                max-width: 400px;
                overflow-y: scroll;
            }
            .result {
                font-weight: 300;
                width: 400px;
                padding: 20px;
                text-align: center;
                background: #eceef0;
                border-radius: 10px;
            }

With this CSS I create the following:

This is scrolls from left to right. The issue I'm having is that I can't enlarge the individual width of .result. The max-width of the parent is 500px which would be the parent window and I'd like the child element to be 400px but it doesn't work. It appears that the flex some how limits it. Here is a code pen.

https://codepen.io/impactcolor/pen/VwXPNLe

user_19546447 · Answer

I think you wanna change the .result box to 400px, if so you can try this

.result {
+++ flex-shrink: 0;
}

this is a screenshot

#app is a flex container, the items will behave in shrink. so you need to rewrite flex-shrink

The items do not stretch on the main dimension, but can shrink.

you can find more information in MDN

My English is very basic, Hope it can help you.

user_8188682 · Answer

You can set min-width to 400px inside the .result class. See following code:

const {
  ref,
  createApp
} = Vue;
const app = createApp({
  setup() {
    let comments = ref([]);
    let page = 1;
    const load = async $state => {
      console.log("loading...");
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/comments?_limit=10&_page=" + page);
        const json = await response.json();
        if (json.length < 10) $state.complete();
        else {
          comments.value.push(...json);
          $state.loaded();
        }
        page++;
      } catch (error) {
        $state.error();
      }
    };

    return {
      load,
      comments,
      page,
    };
  },
});
app.component("infinite-loading", V3InfiniteLoading.default);
app.mount("#app");

#app {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 20px;
  margin: 20px auto 20px auto;
  max-height: 400px;
  max-width: 500px;
  overflow-y: scroll;
}

.result {
  font-weight: 300;
  min-width: 400px !important;
  padding: 20px;
  text-align: center;
  background: #eceef0;
  border-radius: 10px;
}




  
  
  



  
    
      {{ comment.email }}
      {{ comment.id }}

user_15176148 · Answer

Is this what you are asking? use max-width and min-width These properties of CSS allows us to set minimum width values and max width values.

const { ref, createApp } = Vue;
            const app = createApp({
                setup() {
                    let comments = ref([]);
                    let page = 1;
                    const load = async $state => {
                        console.log("loading...");
                        try {
                            const response = await fetch("https://jsonplaceholder.typicode.com/comments?_limit=10&_page=" + page);
                            const json = await response.json();
                            if (json.length < 10) $state.complete();
                            else {
                                comments.value.push(...json);
                                $state.loaded();
                            }
                            page++;
                        } catch (error) {
                            $state.error();
                        }
                    };

                    return {
                        load,
                        comments,
                        page,
                    };
                },
            });
            app.component("infinite-loading", V3InfiniteLoading.default);
            app.mount("#app");

#app {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 10px;
                padding: 20px;
                margin: 20px auto 20px auto;
                max-height: 400px;
                max-width: 500px;
                overflow-y: scroll;
            }
            .result {
                font-weight: 300;
                min-width: 400px;
        max-width: 400px;
                padding: 20px;
                text-align: center;
                background: #eceef0;
                border-radius: 10px;
        background-color: red;
            }


    
        
        
        
    
    
        
            
                {{ comment.email }}
                {{ comment.id }}

user_11617436 · Answer

What you can do is use the flex shorthand property set the values of flex-grow, flex-shrink & flex-basis. In your case, you would use flex: 0 0 400px;, therefore setting the flex-basis(the initial width that the flex child should take) to 400px.

The reason why setting width doesn't work is that the flex-grow:1; flex-shrink: 1; flex-basis: 0%; properties are applied to the children of the flex container. Read more about it here.

const {
  ref,
  createApp
} = Vue;
const app = createApp({
  setup() {
    let comments = ref([]);
    let page = 1;
    const load = async $state => {
      console.log("loading...");
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/comments?_limit=10&_page=" + page);
        const json = await response.json();
        if (json.length < 10) $state.complete();
        else {
          comments.value.push(...json);
          $state.loaded();
        }
        page++;
      } catch (error) {
        $state.error();
      }
    };

    return {
      load,
      comments,
      page,
    };
  },
});
app.component("infinite-loading", V3InfiniteLoading.default);
app.mount("#app");

#app {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 20px;
  margin: 20px auto 20px auto;
  max-height: 400px;
  max-width: 500px;
  overflow-y: scroll;
}

.result {
  font-weight: 300;
  /* width: 400px; */
  flex: 0 0 400px;
  padding: 20px;
  text-align: center;
  background: #eceef0;
  border-radius: 10px;
}





  
  
  



  
    
      {{ comment.email }}
      {{ comment.id }}

Setting width inside of a flex row div

4 Answers