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

samnoon · Answer 1 · 2022-07-18T08:06:12.910

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;
}

<html>

<head>
  <script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script>
  <script src="https://unpkg.com/v3-infinite-loading@1.0.6/lib/v3-infinite-loading.umd.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/v3-infinite-loading@1.0.6/lib/style.css" />
</head>

<body>
  <div id="app">
    <div class="result" v-for="comment in comments" :key="comment.id">
      <div>{{ comment.email }}</div>
      <div>{{ comment.id }}</div>
    </div>
    <infinite-loading target="#app" @infinite="load"></infinite-loading>
  </div>
</body>

</html>

score 1 · Accepted Answer · answered Jul 18 '22 at 08:46

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.

Satyam Raj · Answer 3 · 2022-07-18T07:54:47.733

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;
            }

<html>
    <head>
        <script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script>
        <script src="https://unpkg.com/v3-infinite-loading@1.0.6/lib/v3-infinite-loading.umd.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/v3-infinite-loading@1.0.6/lib/style.css" />
    </head>
    <body>
        <div id="app">
            <div class="result" v-for="comment in comments" :key="comment.id">
                <div>{{ comment.email }}</div>
                <div>{{ comment.id }}</div>
            </div>
            <infinite-loading target="#app" @infinite="load"></infinite-loading>
        </div>
    </body>
</html>

Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See [How to Answer](https://stackoverflow.com/help/how-to-answer). — Sfili_81, Jul 18 '22 at 07:48

score 0 · Answer 4 · answered Jul 18 '22 at 08:14

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>

<head>
  <script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script>
  <script src="https://unpkg.com/v3-infinite-loading@1.0.6/lib/v3-infinite-loading.umd.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/v3-infinite-loading@1.0.6/lib/style.css" />
</head>

<body>
  <div id="app">
    <div class="result" v-for="comment in comments" :key="comment.id">
      <div>{{ comment.email }}</div>
      <div>{{ comment.id }}</div>
    </div>
    <infinite-loading target="#app" @infinite="load"></infinite-loading>
  </div>
</body>

</html>

Setting width inside of a flex row div

4 Answers4