如何将宽度应用于css flexbox

Question

渲染标题列表并尝试为它们提供宽度或弹性，但它不起作用标签使用默认宽度 133px，但仅适用于静态数据 min-width 有效。如何在标签中使用 flex 或 width？

import React, { Component } from "react";
import { NavLink, BrowserRouter } from "react-router-dom";
import "./chooseCategory.scss";
import { categoryList } from "./categoryList";
import axios from "axios";

class chooseCategory extends Component {
  state = {
    recdata: [],
  };

  async componentDidMount() {
    let data = await axios.get(`https://jsonplaceholder.typicode.com/posts`);

    this.setState({
      recdata: data.data,
    });
  }

  render() {
    console.log(this.state.recdata);
    return (
      <div className="chooseCategory">
        {this.state.recdata.map((title) => (
          <p className="categoryLink">{title.title}</p>
        ))}
      </div>
    );
  }
}

export default chooseCategory;

.chooseCategory {
  display: flex;
  flex-flow: row nowrap;
  overflow: scroll;
  .categoryLink {
    width: 200px;
    margin-right: 10px;
    border: 1px solid black;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

Answer 1

您应该将flex-shrink: 0 添加到.categoryLink。

这是一个工作示例：https://codesandbox.io/s/snowy-sun-elo7d?file=/src/App.js