Element inside moves out of the box when window size minimized-CodePudding

I am using display: flex to position the contents in a container. When I am minimizing the window size the content goes out of the box. The icon and the button should remain at the center when the center text increases. This is what is being so far. How can I make the content not to go outside of the box during resizing?

https://codesandbox.io/s/updated-file-upload-forked-gowfyo?file=/src/index.tsx

import * as React from "react";
import { render } from "react-dom";
import "./styles.css";

const App = () => {
  return (
    <div className="info-box-container">
      <div className="info-box-section">
        <span className={"info-box-icon"}>icon</span>
        <div className={"info-box-text"}>
          <span>Dummy Text Dummy Text Dummy Text Dummy Text</span>
        </div>
        <button className={"info-box-action-button"}>Test Configuration</button>
      </div>
    </div>
  );
};

render(<App />, document.getElementById("root"));

CSS

.info-box-container {
  border: 1px solid black;
  padding: 8px 20px;
}

.info-box-container .info-box-section {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.info-box-container .info-box-section .info-box-text {
  flex: 1;
  margin-left: 12px;
}

.info-box-container .info-box-section .info-box-action-button {
  float: right;
}

CodePudding user response：

Here is my solution.

This way, you are using row-wrap to wrap the button to a new line.

Change the css as follows:

.info-box-container {
  border: 1px solid black;
  padding: 8px 20px;
}

.info-box-container .info-box-section {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.info-box-container .info-box-section .info-box-text {
  flex: 1;
  margin-left: 12px;
}

.info-box-action-button {
  display: flex;
  overflow: visible;
}